How to put two divs on the same line with CSS in simple_form in rails?

Question

Putting two divs on the same line is an old question. But I can't find a solution when working with simple_form in rails. What I want to do is to display content and its label on the same line. The width of the label is 125px (.left) and the content is on the right (.right). The text in the label is aligned to the right and the text in content is aligned to the left.

Here is the HTML:

<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
    <div style="margin:0;padding:0;display:inline">
        <input type="hidden" value="✓" name="utf8">
        <input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
    </div>
    <div class="left">Proj Name：</div>
    <div class="right">must have a name</div>
    <div class="input string required">

Here is the CSS:

.simple_form div.left {
  float: left;
  width: 125px;
  text-align: right;
  margin: 2px 10px;
  display: inline;
}

.simple_form div.right {
  float: left;
  text-align: left;
  margin: 2px 10px;
  display: inline;
}

However, in the result, there is a linebreak, like so:

Proj Name：
must have a name

The erb code of the simple form is:

<div class="left">Proj Name：</div><div class="right"><%= @project.name %></div> 

I don't want to use a table but CSS only to solve the issue.

Solution 1

Your css is fine, but I think it's not applying on divs. Just write simple class name and then try. You can check it at Jsfiddle.

.left {
  float: left;
  width: 125px;
  text-align: right;
  margin: 2px 10px;
  display: inline;
}

.right {
  float: left;
  text-align: left;
  margin: 2px 10px;
  display: inline;
}

Solution 2

You can't float or set the width of an inline element. Remove display: inline; from both classes and your markup should present fine.

EDIT: You can set the width, but it will cause the element to be rendered as a block.

Solution 3

why not use flexbox ? so wrap them into another div like that

.flexContainer { 
   
  margin: 2px 10px;
  display: flex;
} 

.left {
  flex-basis : 30%;
}

.right {
  flex-basis : 30%;
}

<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
    <div style="margin:0;padding:0;display:inline">
        <input type="hidden" value="✓" name="utf8">
        <input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
    </div>
    <div class="flexContainer">
      <div class="left">Proj Name：</div>
      <div class="right">must have a name</div>
    </div>
    <div class="input string required"> </div>
 </form>

feel free to play with flex-basis percentage to get more customized space.