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    lt form id  new production  class  simple form new production  novalidate  novalidate  method  post  action   projects 1 productions  accept-charset  UTF-8  gt       lt div style  margin 0 padding 0 display inline  gt           lt input type  hidden  value     name  utf8  gt           lt input type  hidden  value  2UQCUU tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9 JRVjALat3hFM   name  authenticity token  gt       lt  div gt       lt div class  left  gt Proj Name  lt  div gt       lt div class  right  gt must have a name lt  div gt       lt div class  input string required  gt    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    lt div class  left  gt Proj Name  lt  div gt  lt div class  right  gt  lt     project name   gt  lt  div gt     I don t want to use a table but CSS only to solve the issue

User · Answer

why not use flexbox   so wrap them into another div like that    x000D   x000D   flexContainer    x000D      x000D    margin  2px 10px  x000D    display  flex  x000D     x000D   x000D   left   x000D    flex-basis   30   x000D    x000D   x000D   right   x000D    flex-basis   30   x000D    x000D   lt form id  new production  class  simple form new production  novalidate  novalidate  method  post  action   projects 1 productions  accept-charset  UTF-8  gt  x000D       lt div style  margin 0 padding 0 display inline  gt  x000D           lt input type  hidden  value     name  utf8  gt  x000D           lt input type  hidden  value  2UQCUU tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9 JRVjALat3hFM   name  authenticity token  gt  x000D       lt  div gt  x000D       lt div class  flexContainer  gt  x000D         lt div class  left  gt Proj Name  lt  div gt  x000D         lt div class  right  gt must have a name lt  div gt  x000D       lt  div gt  x000D       lt div class  input string required  gt   lt  div gt  x000D    lt  form gt  x000D   x000D   x000D    feel free to play with flex-basis percentage to get more customized space

User · Answer

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

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to ruby-on-rails

Examples related to erb

Examples related to simple-form