make things look better on screen

index.html

@@ -29,10 +29,14 @@
       <div id="user-info">
         <!-- User info will be populated dynamically -->
       </div>
-      <label for="connection-topic">Enter connection topic:</label>
-      <input type="text" id="join-chat-room-topic" placeholder="Enter connection topic">
       <button id="create-chat-room">Create</button>
-      <button id="join-chat-room">Join</button> <!-- Changed id -->
+      <div id="or">
+        - or -
+      </div>
+      <div id="join-chat-room-container">
+        <!-- <label for="connection-topic">Enter Your Connection Topic:</label> -->
+        <input type="text" id="join-chat-room-topic" placeholder="topic">
+        <button id="join-chat-room">Join</button> <!-- Changed id -->
     </div>
     <div id="chat" class="hidden">
       <div id="header">

style.css

@@ -122,6 +122,24 @@ main {
     margin-bottom: 1rem;
 }
 
+#join-chat-room-container {
+    display: flex;
+    align-items: center;
+    margin-top: 1rem; /* Add margin between this container and the previous content */
+}
+
+#join-chat-room-container label {
+    margin-right: 0.5rem; /* Add margin to the right of the label */
+}
+
+#join-chat-room-container input {
+    margin-right: 0.5rem; /* Add margin to the right of the input field */
+}
+
+#join-chat-room-container button {
+    margin-left: 0.5rem; /* Add margin to the left of the button */
+}
+
 #details {
     display: flex;
     justify-content: space-between;
@@ -130,6 +148,10 @@ main {
     border-radius: 4px;
 }
 
+#submit-button {
+    margin-left: 1rem; /* Added left margin */
+}
+
 #messages {
     flex: 1;
     min-height: 200px; /* Ensures minimum height to prevent squishing */
@@ -144,11 +166,13 @@ main {
 #message-form {
     display: flex;
     margin-top: 1rem;
+    margin-right: 1rem; /* Added right margin */
 }
 
 #message {
     flex: 1;
     margin-right: 0.5rem;
+    padding-right: 0.5rem; /* Added right padding */
 }
 
 #user-info {