form_forのlabelとtext_fieldを横並びにしたい

Question

NameとIntroductionの編集欄を、labelとtext_field(area)が横並びになるようにしたいです。
display:inline-blockを利用したいのですが、うまくできません。
以下はcssの編集を加えていないコードです。

users/edit.html.erb

<%= render 'shared/header' %>

<h2 class="header-space">User info</h2>

<%= form_for(@user) do |f| %>

  <div class="field">
    <%= f.label :Name %><br/>
    <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
  </div>
  
  <div class="form-group has-icon user-edit">
    <label class="control-label sr-only" for="inputEmail">Image</label>
    <%= f.attachment_field :profile_image, placeholder: "Image", class: "user-edit-form" %>
  </div>

  <div class="field user-edit">
    <%= f.label :Introduction %><br/>
    <%= f.text_area :introduction, autofocus: true, autocomplete: "introduction" %>
  </div>
  
  <div class="actions">
    <%= f.submit "Update" %>
  </div>
  
<% end %>

<%= render 'shared/footer' %>

Answer 1

bootstrap をつかってるなら

<div class="field"> を

  <div class="form-group row">
    <%= f.label :Name, class: "col-sm-2 col-form-label"%><br/>
    <div class="col-sm-10">
    <%= f.text_field :name, autofocus: true, autocomplete: "name", class: 'form-control' %>
    </div>
  </div>

みたいにかくのが推奨みたいですね

https://cccabinet.jpn.org/bootstrap4/components/forms
の見本1（水平フォーム）参照

---

ただCSSでやるなら

.field {
  display: flex;
}

で横並びになると思います（margin や width は調整の必要あり)

ほかのCSSをいろいろ読み込んでたりすると詳細度や読み込み準の関係で上書きされる可能性もあるので、詳細度を調整するか !important をつけるといいかもです

Comments

[退会済みユーザー]

遅くに失礼します。
display: flex;で思っていたものができました。
ありがとうございました。