トークアプリで、画像を挿入するとviewが乱れてしまいます。

前提・実現したいこと

LINEの様に、画像投稿時も、自分の投稿は右寄せで表示される様にしたいです。

発生している問題・エラーメッセージ

画像を投稿すると、過去に投稿した投稿内容の横に、画像が表示されてしまい、
投稿内容と同じ場所である、右寄せの場所に表示されません。

どの様にしたら、うまく表示させることができるのでしょうか？

ご教授のほどよろしくお願いいたします。

rails
1      <div class="contents">
2        <div id="contents">
3          <% @messages.each do |message| %>
4            <% unless message.image.attached? %>
5              <div class="content_entire">
6                <div class="content">
7                  <span class="time"><%= message.created_at.strftime('%H:%M') %></span>
8                  <p><%= message.content %></p>
9                </div>
10              </div>
11            <% else %>
12              <div class="image_entire">
13                <%= image_tag message.image.variant(resize: "300 x 300"), class: "content_image"  %>
14              </div>
15            <% end %>
16          <% end %>
17        </div>
18      </div>

css
1.contents{
2  overflow: scroll;
3  background-color: rgb(255, 255, 255);
4  height: calc(100% - 200px - 90px);
5  padding: 20px;
6}
7
8.content_entire{
9  padding: 10px;
10  height: 50px;
11}
12
13.content{
14  display:inline-block;
15  border-radius:50%;
16  background-size:cover;
17  text-align: end;
18  width: 400px;
19  float: right;
20}
21
22.content p{
23  display: inline-block;
24  background-color: rgb(193, 204, 255);
25  border-radius: 10px;
26  padding: 6px;
27  margin: 0 10px 10px 0 ;
28  word-break: break-all;
29}
30
31
32.time{
33  color: rgb(193, 204, 255);
34  font-size: 7px;
35}
36
37
38.image_entire{
39  display:inline-block;
40  border-radius:50%;
41  background-size:cover;
42  text-align: end;
43  width: 400px;
44  float: right;
45}
46.content_image{
47  display: inline-block;
48  background-color: rgb(193, 204, 255);
49  border-radius: 10px;
50  padding: 6px;
51  margin: 0 10px 10px 0 ;
52  word-break: break-all;
53}
54

試したこと

rails
1<div class="content">
2　　<span class="time"><%= message.created_at.strftime('%H:%M') %></span>
3　　<p><%= message.content %></p>
4   <%= image_tag message.image.variant(resize: "300 x 300"), class: "content_image"  %>
5</div>

本来であれば、上記の様にcontentクラスのなかに、画像も含めたかったのですが、
画像がうまく表示されず、contentクラスと分けて記述しました。

もし、contentクラス内に記述できるようでれば、教えていただきたいです。
よろしくお願いいたします。