“Fluid” hanging indent in CSS

Question

On a website, I would like this layout:

Some text [input 1]
          [input 2]

I want:

• the first input to be placed where the next word would appear and the distance between "text" and "[input 1]" to be one space
• the second input to be placed below the first and aligning with it
• both inputs moving to the left or right if the text width changes

---

Here is what I tried, but did not succeed:

When I surround the two inputs in a DIV, without any styling, it looks like this:

Some text
[input 1]
[input 2]

When I style the DIV as display: inline-block , it looks like this, ie the text drops to the bottom:

          [input 1]
Some text [input 2]

When I style the DIV as display: inline or float the text to the left, it looks like this:

Some text [input 1]
[input 2]

When I style the div with margin left, I get:

Text      [input 1]
          [input 2]

ie the position does not change when I change the text width.

---

I can easily do this with tables. Please show me how to do it in CSS, without JavaScript. Thank you.

Answer 1

DEMO

HTML

<div>
    <div id="text-container">
        Some text
    </div>
    <div id="input-container">
        <input />
        <input />
    </div>
</div>

CSS

#text-container:after {
    content:"\00a0"; /*spacing*/
}
#text-container,
#input-container {
    display:inline-block;
    vertical-align:top;
}
#input-container input {
    display:block;
}

Answer 2

This is repeatable and responsive!

Live demo (click).

<form>
  <div>
    <label>Set One</label>
    <label>Set Two</label>
    <label>Set Three</label>
  </div>
  <div class="inputs">
    <input type="text" placeholder="set 1">
    <input type="text" placeholder="set 1">
    <input type="text" placeholder="set 2">
    <input type="text" placeholder="set 2">
    <input type="text" placeholder="set 3">
    <input type="text" placeholder="set 3">
  </div>
</form>

CSS:

form {
  position: relative;
}

form div {
  display: inline-block;
  vertical-align: top;
}

label, input { 
  display: block;
}

label {
  margin-top: 26px;
}

label:first-child {
  margin-top: 0;
}

@media (max-width: 300px) {

label {
  margin-bottom: 62px;
}
form .inputs {
  display: block;
  position: absolute;
  top: 0;
}
input {
  margin-top: 20px;
}

}

This is probably really the easiest way, which is to emulate a table using CSS and a few more non-semantic elements. Live demo (click).

<form class="table">
  <div class="row">
    <label class="cell">Set One</label>
    <div class="cell">
      <input type="text" placeholder="set 1">
      <input type="text" placeholder="set 1">
    </div>
  </div>
  <div class="row">
    <label class="cell">Set Two</label>
    <div class="cell">
      <input type="text" placeholder="set 2">
      <input type="text" placeholder="set 2">
    </div>
  </div>
</form>

CSS:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell { 
  display: table-cell;
}

input {
  display: block;
}

@media (max-width: 300px) {

.cell {
  display: block;
}

}

Answer 3

A version using CSS3 flexbox : DEMO

Works even when inputs are inline elements and they wrap.

HTML

<div class="flexbox">
    <div>
        Some text
    </div>
    <div class="inputs">
        <input />
        <input />
    </div>
</div>

CSS

.flexbox { display: flex }
.inputs input { display: block }