联系表格与文本区域填写剩余内容

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;

}