Edwin Coronado Edwin Coronado - 4 months ago 12
HTML Question

Align header and textarea inline but fill window width

One is a header, another one is a textarea. If I don't use "display: inline-block" it puts them on 2 separate lines and the textarea properly fills to the width of the window and resizes if the window size changes. However, I want them to be inline but when I add the "display: inline-block", the textarea no longer fills to the width of the page.

Here is the code that I currently have.



<div style="display: inline-block" id="element1">
<h4>Description</h4>
</div>

<div style="display: inline-block; vertical-align: text-top;" id="element2">
<textarea rows="4" cols="50" readonly="readonly" style="width:100%">body</textarea>
</div>





This is a screenshot of what it produces.
Current Code Screenshot

Any help would be appreciated. Thanks.

Answer

Is this what you look for?

.wrapper {
  display: flex;
}
.wrapper div:first-child {
  font-weight: bold;
}
.wrapper div:last-child {
  flex: 1;
  padding-left: 5px;
}
.wrapper div:last-child textarea {
  width: 100%;
}
<div class="wrapper">
  <div id="element1">
    Description
  </div>
  <div id="element2">
    <textarea rows="4" readonly="readonly">body</textarea>
  </div>
</div>