Align first div to left with subsequent divs aligned right

Question

I wish to display three pieces of text on the same horizontal line, as follows:

|                                                            |
| Chapter one              


        

Answer 1

#container {
  display: flex;
}
#container > div:first-child {
  margin-right: auto;
}

<div id="container">
  <div>Chapter one</div>
  <div>Language:&nbsp;</div>
  <div>English</div>
</div>

Whether you ultimately have one or two divs on the right (depending on your combo box set-up), the method above will work. It basically keeps the first div flush left and everything else flush right.

More details here:

• Aligning Three Divs Horizontally Using Flexbox
• Methods for Aligning Flex Items

---

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

Answer 2

using float in nested div can be the solution

<div>Chapter one</div>
<div>
    <div style="float:left;">Language:</div>
    <div style="float:right;">English</div>
</div>
</div>

float property is used to to specify whether an element can float or not. Don't forget to use clear for elements below floating ones.

Answer 3

The easiest way to implement this is using a table

<table>
   <tr>
        <td style="align:left;">Chapter One</td>
        <td style="align:right;">Language: English</td>
    </tr>
</table>