How can I keep two elements next to each other?

Question

I have this HTML:

.parent{
  border: 1px solid;
  width: 70%;
}

.title{
  width: 50px;
}

.input {
}

<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text">
</div>

I need to set width: 100%; for .input element. But when I do that, being in the same line breaks .. I mean in that case both .title and .input will not be in the same line anymore. How can I keep them in the same line and also fill the whole width of their parent (.parent)?

Note: There are some ways by using either flex or calc() .. but actually the most of my website's users use old browsers. anyway I'm looking for a approach which supports old browsers.

See [Input box 100% width, with label to the left](http://stackoverflow.com/questions/6713435/input-box-100-width-with-label-to-the-left#answer-6713497). — showdev, Sep 20 '16 at 18:57

score 4 · Answer 1 · answered Sep 20 '16 at 19:03

I think you're going to have to use table-cell display if flex is not an option to you:

.parent {
  display: table;
  width: 100%;
  }

.title {
  display: table-cell;
  }

.input {
  display: table-cell;
  width: 100%;
  }

<div class="parent">
  <span class="title">title:</span>
  <input class="input" name="title" type="text">
</div>

score 1 · Answer 2 · answered Sep 20 '16 at 19:38

Flexbox is the best way, but if you can't use it there are some other options. If you are fine with changing the .title element to use a percentage instead of a 50px width, you can achieve what you are wanting using float.

.parent {
  border: 1px solid;
  width: 70%;
}

/* Micro clearfix so the parent does not collapse */
.parent:after {
  content: ' ';
  clear: both;
  display: inline-block;
}

.title {
  float: left;
  width: 15%;
}

.input {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  float: left;
  width: 85%;
}

<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text">
</div>

score 0 · Answer 3 · answered Sep 20 '16 at 19:06

.parent{
  border: 1px solid;
  width: 70%;
  display:table;
  padding: 0 10px;
}

.title,
.input{
  display: table-cell;
}

.input {
  width:100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
}

<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text">
</div>

How can I keep two elements next to each other?

3 Answers3