0

I have a structure that looks like this:

<div class="col-md-7">
  <div style="float:left; padding-right:10px">
    <h5>{{text}}</h5>
  </div>
  <div style="float:left">
    <input type="text">
  </div>
</div>

The parent div is of fixed width, but the {{text}} is of variable length. I'd like both the text and the input to fit on the same line. How do I use css to make the input width dynamic?

user592419
  • 5,103
  • 9
  • 42
  • 67

1 Answers1

1

Adding a width: 100%; on the h5 and input elements should make them fill their parents:

h5 { width: 100%; }
input { width: 100%; }

However, it sounds like your issue is in those parent divs themselves, and not the h5 or input elements.

You can align those divs side-by-side by adding display:inline-block; to their styling, and then applying a width (something like 50%):

<div class="col-md-7">
  <div style="float:left; display:inline-block; width:50%;">
    <h5>{{text}}</h5>
  </div>
  <div style="float:left; display:inline-block; width:50%;">
    <input type="text">
  </div>
</div>
Stuart Kershaw
  • 16,831
  • 6
  • 37
  • 48
weedle
  • 19
  • 2
  • That's just to make the wrapping divs the same width, and to ensure that they stack side-by-side to fill up to (exactly) 100% of their parent's width. That 50% width can be set to whatever you want or need... just so long as the widths of both combined (plus any padding) doesn't exceed their full parent element width. If so, then the second child div will bump down to the next line. – weedle Mar 29 '14 at 17:49
  • Doesn't that assume that the parent widths should be the same width? I don't want them to be. I want them to fit to their width. I'm guessing that's what the inline-blocks were meant to do, but that didn't work. – user592419 Mar 29 '14 at 22:38