rails チャット機能（DM）を非同期でラインのように左右に表示したい。

前提・実現したいこと

こちらのサイトを参考にして非同期のチャットアプリを実装出来たのですが、
全て左側に表示されているので、ユーザごとに左右に表示したいと思っています。
https://qiita.com/OgawaNorihiro/items/6d9f85d8e89d1def4f15#usersindexhtmlerb%E3%81%AE%E4%BD%9C%E6%88%90

試したこと

<% if current_user.id == direct_message.user_id %>
<%= direct_message.content %>
<% else %>
<%= direct_message.content %>
<% end %>
上記のように試してみましたが、そうなると非同期ではなくなりました。
再読み込みで表示される。

どなたかご教授していただきたいです。
ruby 2.6.6
rails 5.2.4

下記がコードとなっております。
ほぼコードは参考にしたサイトと変わってないと思います。
よろしくお願いおいします。

class User < ApplicationRecord

has_many :entries
has_many :direct_messages
has_many :rooms, through: :entries
end

class DirectMessage < ApplicationRecord
  belongs_to :user
  belongs_to :room

  after_create_commit { DirectMessageBroadcastJob.perform_later self }
end

class DirectMessageBroadcastJob < ApplicationJob
  queue_as :default

 def perform(direct_message)
    ActionCable.server.broadcast "room_channel_#{direct_message.room_id}", direct_message: render_direct_message(direct_message)
  end

  private

    def render_direct_message(direct_message)
      ApplicationController.renderer.render partial: 'direct_messages/direct_message', locals: { direct_message: direct_message }
    end
end

class RoomsController < ApplicationController
  before_action :authenticate_user!
  def show
    @room = Room.find(params[:id])
    #present?の戻り値は真偽値。よって、trueの場合、
    if Entry.where(:user_id => current_user.id, :room_id => @room.id).present?
      @direct_messages = @room.direct_messages
      @entries = @room.entries
    else
      redirect_back(fallback_location: root_path)
    end
  end

  def create
    @room = Room.create(:name => "DM")
    @entry1 = Entry.create(:room_id => @room.id, :user_id => current_user.id)
    @entry2 = Entry.create(params.require(:entry).permit(:user_id, :room_id).merge(:room_id => @room.id))
    redirect_to room_path(@room.id)
  end
end

views/rooms/show.html.erb

<div style="margin-top: 100px; margin-left: 100px;">

  <h1>Chat room</h1>
  <div class="chats-wrapper">
  <div class="chats-inside">

 <div id="direct_messages" data-room_id="<%= @room.id %>">
  <%= render @direct_messages %>
</div>

  </div>
  <div class="chatForm">
    <div class="form-message">
      <form>

        <input type="text" id="chat-input" data-behavior="room_speaker">
      </form>
    </div>
  </div>

</div>

direct_messages/direct_message.html.erb

<div class="each-say">

 <%= direct_message.content %>
  <%= direct_message.user.nickname %>

</div>

class RoomChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
    stream_from "room_channel_#{params['room']}"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    DirectMessage.create! content: data['direct_message'], user_id: current_user.id, room_id: params['room']
  end
end

javascripts/channels/room.coffee

document.addEventListener 'turbolinks:load', ->
  App.room = App.cable.subscriptions.create { channel: "RoomChannel", room: $('#direct_messages').data('room_id') },
    connected: ->

    disconnected: ->

    received: (data) ->
      $('#direct_messages').append data['direct_message']

    speak: (direct_message) ->
      @perform 'speak', direct_message: direct_message

  $('#chat-input').on 'keypress', (event) ->
    if event.keyCode is 13
      App.room.speak event.target.value
      event.target.value = ''
      event.preventDefault()