CSS - Floating two elements side by side

I have two divs side by side. I want div that is on left hand side to take up as much room as it needs without pushing the other div (on right) to next line.

Here is what I have right now: http://jsfiddle.net开发者_开发技巧/RALza/

HTML

<div id="container">
    <div id="divA"> left text </div>
    <div id="divB">  right text </div>
</div>

CSS

#divA
{
  float:left;
  border:1px solid blue;
  width:100%;
}

#divB
{
  float:right;
  border:1px solid red;
}

---

<div id="container">
    <div id="divB">  right text </div>
    <div id="divA"> left text </div>
</div>

#divA
{
  overflow:auto;
  border:1px solid blue;
}

#divB
{
  float:right;
  border:1px solid red;
}

will work.

But you should specify width of floating elements.

---

You can use CSS flexible boxes:

#container {
  display: flex;
  justify-content: space-between;
}

<div id="container">
    <div id="divA">left text</div>
    <div id="divB">right text</div>
</div>

---

Try this fiddle: http://jsfiddle.net/RALza/6/

It works by changing the order of the two divs and making the first div a normal block element without a float.

<div id="container">
    <div id="divB">  right text </div>
    <div id="divA"> left text </div>
</div>

and

#divA
{
  border:1px solid blue;
}

#divB
{
  float:right;
  border:1px solid red;
}