"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, i.e. 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]

i.e. 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.

Would you be interested in me showing a Javascript solution (incorporating CSS of course, just JS to do the calculations)? — Deryck, Jan 25 '14 at 06:03
@Deryck No, I want this to work with JS turned off, just like tables would. — , Jan 25 '14 at 06:04

score 3 · Answer 1 · answered Jan 25 '14 at 06:05

3

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;
}

answered Jan 25 '14 at 06:05

kei

20,157
2
35
62

It seems to me that you don't need the DIV around the labels (if you have only one label, as in my question). And then you don't need the extra space, because the line break between "some text" and the DIV will create a space. – Jan 25 '14 at 06:22

m59 · Accepted Answer · 2014-01-25T06:44:26.297

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;
}

}

edited Jan 25 '14 at 06:44

answered Jan 25 '14 at 06:07

m59

43,214
14
119
136

The labels drop to the bottom. Delete one label and you can see. – Jan 25 '14 at 06:12
@what just needed `vertical-align: top` on the div. I updated the answer and demo. – m59 Jan 25 '14 at 06:14
Okay. It seems to me that you don't need the DIV around the labels (if you have only one label, as in my question). – Jan 25 '14 at 06:20
Wow, okay :-) Actually the first version of your answer was fine, and I accepted kei's identical answer because it came in one minute earlier, but this edit provides something that can be very useful for me in the future, so I accept this, even though it goes beyond what I currently need. Thank you! – Jan 25 '14 at 06:34
@what yeah, there actually was a slight difference. I didn't notice his when I posted this, but I kept it because I was still updating =D I'm actually still trying things out. I use this stuff as practice! – m59 Jan 25 '14 at 06:36
@what Ok, now I'm done. You said you were trying to avoid tables, but if you're ok with using `display: table` in CSS, you may want to go with the bottom potion of my answer. – m59 Jan 25 '14 at 06:45

score 1 · Answer 3 · answered Oct 29 '18 at 02:22

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 }

"Fluid" hanging indent in CSS

3 Answers3