How to draw two boxes with different sizes in the same row with custom shape in flutter?

Question

How do I achieve two boxes in one row while one of them has a triangle and lay over the other box, grey box over white box on flutter as in the image below? I am new to flutter and am clueless on how to get started on this, I tried with my code but I was able to do two boxes with the same size, if I added width to container it doesn't work.

this is what I want to do simillar

my work

    child:Column(children: [
      Row(children: [
        Flexible(
          child:Container(
            height: 50,
            padding: EdgeInsets.symmetric(
              horizontal: 2,
              vertical: 2,
            ),
            decoration: BoxDecoration(
              color: Color(0XFFDDDDDD),
              borderRadius:BorderRadius.only(
                topLeft: Radius.circular(5),
                bottomLeft: Radius.circular(5),
              ),
            ),
            child: Row(children: [
              Icon( Icons.email,color: Colors.black45, size: 20),
              SizedBox(width: 2),
              Expanded(child: Text('Email', style: robotoRegular)),

            ]),
          ),),

        Flexible(
          child:   Container(
            height: 50,
            padding: EdgeInsets.symmetric(
              horizontal: 2,
              vertical: 2,
            ),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius:BorderRadius.only(
                topRight: Radius.circular(5),
                bottomRight: Radius.circular(5),
              ),
            ),
            child: Row(children: [

              SizedBox(width: 2),
              Expanded(child: Text('[email protected]', style: robotoRegular)),

            ]),
          ),),
      ]),
    ])