flexitemのTEXTAREAとTEXT入力コントロールの上揃えは？

Question

最初にflex：プロパティを使用して、ブラウザウィンドウのサイズを変更したときに隣接する2つのflexitemsを大きくしたり小さくしたりしました。それはうまくいった。

次に、TEXTAEA要素を2番目のダイナミックフレキシブルに入れます。それはうまくいった。

テキストエリアの横に1行のTEXT入力要素を追加し、テキスト入力要素の下の行がテキストエリアの下の行に揃えられていることを確認しましたが、2つの要素の上の行を揃えます。 CSSを使ってスクリプトを作成することなく、どうすればいいですか？

.parent { 
 
    display: flex; 
 
    background-color: yellow; 
 
} 
 

 
.verttop { 
 
    align-items: flex-start; 
 
} 
 

 
.dimen { 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 

 
.placeholder { 
 
    background-color: khaki; 
 
    width: 300px; 
 
} 
 

 
.bs1 { 
 
    background-color: green; 
 
    width: 20px; 
 
} 
 

 
.bs2 { 
 
    flex: 1 1 auto; 
 
    background-color: cyan; 
 
} 
 

 
.bs3 { 
 
    flex: 1 1 auto; 
 
    background-color: red; 
 
} 
 

 
.bs4 { 
 
    background-color: gray; 
 
    width: 100px; 
 
}

<div class="parent"> 
 
    <div class="placeholder dimen"></div> 
 
    <div class="bs1 dimen"></div> 
 
    <div class="bs2 dimen"></div> 
 
    <div class="bs3"> 
 
    <textarea rows="10" cols="18">This is a fairly  lengthy and annoyingly meaningless sentence. 
 
      </textarea> 
 
    <input class="verttop" type="text" value="Hello"> 
 
    </div> 
 
    <div class="bs4 dimen"></div> 
 
</div>

Answer 1

あなたは.bs3フレックスを作り、そのアイテムを揃えることによってこれを行うことができます。

.bs3 { 
    flex: 1 1 auto; 
    background-color: red; 
    display: flex; 
    align-items: flex-start; 
}