CODEWITHSUNDEEP
htmlcss
István
István

Reputation: 5127

Fill the remaining space with CSS

I have the following html (JSFiddle):

<div id="container">
  <div>
    <label>Simple label
      <input>
    </label>
  </div>
  <div>
    <label>Other label
      <input>
    </label>
  </div>
  <div>
    <label>Variable label
      <input>
    </label>
  </div>
</div>

Is it possible with CSS (I don't want to use JavaScript for this), to fill the remaining space with the inputs? I have variable label length, and I want to align the right side of the input's without float: right (but not to bother also the left alignment).

Upvotes: 0

Views: 48

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

You can make the label a flex parent and set the input to flex-grow: 1

#container div {
  margin: 10px 0;
  width: 300px;
}

input {
  flex-grow: 1;
}

label {
  display: flex;
}
<div id="container">
  <div>
    <label>Simple label
      <input>
    </label>
  </div>
  <div>
    <label>Other label
      <input>
    </label>
  </div>
  <div>
    <label>Variable label
      <input>
    </label>
  </div>
</div>

Upvotes: 1

Related Questions