Staggering chatbot queries and replies in GUI

I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project. It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.

I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.

I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.

Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across... Here is the CSS code:

body {
    font-family: Cambria;
    color: rgb(122, 4, 4);
    background-color: rgb(136, 175, 175);
}

h1 {
    color: black;
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    font-size: 40px;
}

h2 {
    color: black;
    font-size: 20px;
    margin-top: 3px;
    text-align: center;
}

#user_chatbox {
    margin-left: 0;
    margin-right: auto;
    width: 50%;
    margin-top: 30%;
}

#bot_chatbox {
    margin-left: 50%;
    margin-right: auto;
    width: 50%;
    margin-top: 10%;

    /* height: 80%; */
    /* background-color: pink; */
    /* border-radius: 10px; */
}

#userInput {
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    margin-top: 150px;
}

#textInput {
    width: 92%;
    border: 3px solid Black;
    border-bottom: 3px solid #660096;
    font-family: Cambria;
    font-size: 16px;
}

#buttonInput {
    padding: 10px;
    font-family: Cambria;
    font-size: 72;
}

.userText {
    color: rgb(0, 0, 0);
    font-family: Georgia;
    font-size: 16px;
    text-align: left;
    line-height: 20px;
}

.userText span {
    display:block;
    width:auto;
    background-color: rgb(87, 201, 152);
    padding: 10px;
    border-radius: 10px;
    /* counter-increment: var(--chatbox_spacing); */
}

.botText {
    color: Black;
    font-family: Consolas, monaco, monospace;
    font-size: 16px;
    text-align: left;
    /* line-height: calc(29 + var(--chatbox_spacing))px; */
    line-height: 20px;
  }

.botText span {
    display:block;
    width:auto;
    background-color: rgb(73,196,199);
    padding: 10px;
    border-radius: 10px;
    /* counter-increment: var(--chatbox_spacing); */
}

... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/static/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>

  <body>
    <h1>Analysis Chatbot</h1>

    <!-- The main chat environment for interacting with the bot. -->
    <div>

      <!-- The text of the bot. -->
      <div id="bot_chatbox">
        <p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
      </div>

      <div id="user_chatbox"></div>

      <!-- The input text of the user interacting with the bot. -->
      <div id="userInput">
        <input id="textInput" type="text" name="msg" placeholder="Message">
        <input id="buttonInput" type="submit" value="Send">
      </div>

      <script>
        function getBotResponse() {
          var rawText = $("#textInput").val();
          var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
          $("#textInput").val("");
          $("#user_chatbox").append(userHtml);
          document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
          $.get("/get", { msg: rawText }).done(function(data) {
            var botHtml = '<p class="botText"><span>' + data + '</span></p>';
            $("#bot_chatbox").append(botHtml);
            document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
          });
        }
        $("#textInput").keypress(function(e) {
            if(e.which == 13) {
                getBotResponse();
            }
        });
        $("#buttonInput").click(function() {
          getBotResponse();
        })
      </script>
    </div>
  </body>
</html>

Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.

I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...