css - 带有文本区域的联系表格填充剩余内容

Question

我正在尝试创建一个类似于以下设计的联系表单，但似乎无法获得正确的结果。我以为我可以用 flex-box 做到这一点，但我无法正确显示文本区域。如果有更好的方法来保持 HTML 结构不变，我愿意接受建议。

代码笔

<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>

标签： css

Answer 1

也许有一个更快速的解决方案，但你可以用 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;

}