Contact Form with Text Area filling remaining content - css

Question

I am trying to create a contact form similar to the design bellow, but can't seem to get the correct result. I thought I could do this with flex-box, but I am having trouble getting the Text Area to Display correctly. If there is a better way to do this with keeping the HTML structure the same, I am open to suggestions.
CodePen
<form class="flex-container">
<ul>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li>
<input type="text" placeholder="right">
</li>
<li>
<input type="text" placeholder="left">
</li>
<li class="text-area">
<textarea placeholder="right"></textarea>
</li>
</ul>
</form>

Answer 1

Maybe there is a more quick solution but you can do that with bootstrap :
<form class="container">
<div class="col-5 row">
<div class="col-6">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
<div class="row mt-3">
<input type="text" placeholder="left">
</div>
</div>
<div class="col-3 ml-3">
<div class = "row">
<input type="text" placeholder="left">
</div>
<div class = "row mt-3 heightCSS">
<textarea placeholder="right"></textarea>
</div>
</div>
</div>
CSS :
.heightCSS{
height: 8em;
width: 14em;
}