メッセージ送信機能について

メッセージ送信機能の薄いグレーの時間についてですが、上手く行きません。
どう上手くいかないかと言うと、ユーザー名(グレー色の時間の左横)が重なります。
短いユーザー名だと違和感ないと思いますが、長くすると重なってしまいます。
実装内容
https://gyazo.com/54a86b88517118b87c7eafa9f3338ef1
ユーザー名に合わせて時間を配置したいのです。

原因は時間が固定されてるためだと思います。
なので時間の要素の移動させるcssを外しました。
cssにpaddingとかmarginとか指定するのではなく、ビューファイルのインデントの問題かな？と思ったので
試しましたが、分かりませんでした。

cssを外した後のビューはこのようになっています。
https://gyazo.com/798735e37a070f2ead413e48fa57db3d
ビューの中身は

    .chat-main-middle-user-name
      = message.user.name
    .chat-main-middle-time
      = message.created_at.strftime("%Y/%m/%d/(%a) %H:%M:%S")
    .chat-main-middle-message
      - if message.content.present?
        %p.lower-message__content
          = message.content