写真とフォームを横並びにしたいです。

Question

写真とフォームを横並びにしたいです。

railsでサイトを作っておりログインフォームを作成しており、写真の横に入力フォームを並べたいのですが、
縦並びになってしまう。

初歩的なことかもしれないのですが、お力添えお願いいたします。

該当のソースコード

 <%= form_with(model: @user, url: session_path(resource_name), local:true) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     
     <div class="img-1">
  <%= image_tag 'latlay.jpg', class: 'rog' %>
  </div>
   
<div class="text-box">
  
    <div class="form-group">
    <%= f.label :eメール %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
    </div>

    <div class="form-group">
    <%= f.label :パスワード %><br />
    <%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
    </div>

  <% if devise_mapping.rememberable? %>
    <div class="form-group">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end %>
  </div>

  <div class="actions">
   <%= f.submit "ログイン" , class: "btn btn-primary btn-block" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
  </div>
</div>  
</div>

/* ログインフォーム */


.rog {
  text-align:right;
  width:300px;
  height:450px;
  ustify-content:center;
}

.img-1 {
  text-align:right;
  width:300px;
  height:450px;
  ustify-content:center;
}



.form-group {
  width:300px;
  text-align:right;
}

.form-control input{
  text-align:right;
  width:300px;
}

.container {
 
  justify-content: center;
}

.actions {
  width:300px;
}

.text-box {
  text-align:right;
  width:300px;
}

.text-center {
  text-align:right;
}

Answer 1

Bootstrap使ってるなら、グリッドシステムで何とかなるのでは？

※未検証だけど実装例

<div class="row">
    <div class="col-6">
左の要素
    </div>
    <div class="col-6">
右の要素
    </div>
</div>

もし左右均等な幅でないなら足して12になるように調整を。

Comments

[yumaaaa]

無事何日も悩んでいたことが解決できました。
大変ありがとうございます。

[m.ts10806]

レイアウト組みを楽するため（効率化するため）のCSSフレームワークだと思うので、余程特殊なことをしない限り大抵機能だけで済みます。