Edwin Coronado Edwin Coronado - 1 year ago 66
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">

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

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

Any help would be appreciated. Thanks.

Answer Source

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">
  <div id="element2">
    <textarea rows="4" readonly="readonly">body</textarea>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download