Position elements left and right on same line, or both left if not enough space

Question

What I want:

When there's enough space, it's like this:

.left{
  display: inline-block;
  float: left;
}

.right{
  display: inline-block;
  float: right;
}

<div class='parent'>
  <div class='left'>This should be on the left</div>
  <div class='right'>And this should be on the right :)</div>
</div>

When there's not enough space, it's like this:

 <div class='parent'>
   <div class='left'>This should be on the left</div>
   <div class='right'>And this should be on the right :)</div>
</div>

How do I do that?

Answer 1

Try adding width

.left{
  display: inline-block;
  float: left;
  width: 50%
}

.right{
  display: inline-block;
  float: right;
  width: 50%
}

Demo

---

Use display: table-cell for non-width solution. And you need to insert another element to wrap the content.

    .parent{
   display:table;
   width:100%
 }
 .left{
  display: table-cell;
  background:grey;
  vertical-align:top;
}
.right{
  display: table-cell;
  background: blue;
  vertical-align: top;
}
.right span{
  float:right
}

DEMO 2 updated

---

Got your question ;) you can use display inline for that

 .left{
  display: inline;
  vertical-align:top;
}
.right{
  display:  inline;
  vertical-align: top;
}
.right span{
  float:right
}

Demo 3