投稿アプリで画像のみの投稿をするとビューが崩れてしまう

Question

画像のみの投稿をするとチャットのフォームが崩れてしまいます

• 数値の投稿

https://gyazo.com/7bd2787f87dbeaf730ac1ac0a8dfed38

• 数値と画像の投稿

https://gyazo.com/a14df30c63eecc28c90dcd665a342a54

• 画像のみの投稿

https://gyazo.com/3015bb2ca9358f1c513b5ddd9a6ea80e

試したこととして、modelには:was_attached?の記入

class Message < ApplicationRecord
  belongs_to :user
  belongs_to :room
  has_one_attached :image

  validates :content, presence: true, unless: :was_attached?

  def was_attached?
    self.image.attached?
  end

end

<div class="lower-message">
    <div class="message-content">
      <!-- 投稿したメッセージ内容を記述する -->
      <% if message.content %>
      <%= @room.currency.name %><%= message.content %><br>
      <div class="lower-sub-message">
        <%= "換算額は¥#{(message.content / @room.price * 100).floor}" %><br>
        <%= "#{@room.number}人で割った1人分の金額は#{@room.currency.name}#{message.content / @room.number}" %><br>
        <%= "#{@room.number}人で割った1人分の換算額は¥#{(message.content / @room.price * 100 / @room.number).floor}" %>
      <% end %>
      </div>
    </div>
    <%= image_tag message.image.variant(resize: '300x300'), class: 'message-image' if message.image.attached? %>
  </div>

<%= image_tag message.image.variant(resize: '300x300'), class: 'message-image' if message.image.attached? %>の部分を他のdivで囲むと良いのかなど考えてみました。

Answer 1

<div class="lower-message">
    <div class="message-content">
      <!-- 投稿したメッセージ内容を記述する -->
      <%= "YOU ON ME!" %><br>
      <% if message.content %>
      <%= @room.currency.name %><%= message.content.to_s(:delimited) %><br>
      <div class="lower-sub-message">
        <%= "換算額は¥#{(message.content / @room.price * 100).floor.to_s(:delimited)}" %><br>
        <%= "#{@room.number}人で割った1人分の金額は#{@room.currency.name}#{(message.content / @room.number).to_s(:delimited)}" %><br>
        <%= "#{@room.number}人で割った1人分の換算額は¥#{(message.content / @room.price * 100 / @room.number).floor.to_s(:delimited)}" %>
      </div>
      <% end %>
    </div>
    <%= image_tag message.image.variant(resize: '300x300'), class: 'message-image' if message.image.attached? %>
  </div>

<% end %>タグの位置の変更により解決しました。

<div class="message-content">の閉じdivタグの中（１行前に<% end %>記入していたこと）によりビューが崩れてしまっていました。