"Fluid" hanging indent in CSS

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.

Solution

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

}