包含剩余内容的文本区域联系表

Question

我正在尝试创建类似于设计波纹管的联系表，但似乎无法获得正确的结果。我以为可以用flex-box做到这一点，但是我在使文本区域正确显示方面遇到困难。如果有更好的方法来保持HTML结构不变，那么我可以提出建议。

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

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

}