如何在flexitem中顶部对齐TEXTAREA和TEXT-input控件？

Question

First I used the flex: property to make two adjacent flexitems grow and shrink when the browser window was resized. That worked.

Then I put a TEXTAEA element into the second dynamic flexitem. That worked fine.

Added a single-line TEXT input element next to the textarea and observed that the bottom line of the text input element aligned with the bottom line of the textarea, but I want the top lines of the two elements to align. How can I do that without scripting using CSS only?

 .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

You can do this by making .bs3 flex and aligning its items.

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