Messages page make up

hipstagram/src/Content/Messages/messages.css

@@ -2,4 +2,26 @@
     background: cadetblue;
     border: 2px solid #3578e5;
     border-radius: 5px;
+    display: grid;
+    grid-template-columns: 2fr 10fr;
+}
+
+.dialogs-items {
+    padding: 10px;
+}
+
+.dialog {
+    
+}
+
+/* .dialog.active {
+    color: greenyellow;
+} */
+
+.messages {
+    padding: 10px;
+}
+
+.message {
+
 }

hipstagram/src/Content/Messages/messages.js

@@ -6,7 +6,29 @@ import './messages.css';
 const Messages = () => {
     return(
         <div className='message-wrapper'>
-            Message
+            <div className='dialogs-items'>
+                <div className='dialog'>
+                    Oleh
+                </div>
+                <div className='dialog'>
+                    Victor
+                </div>
+                <div className='dialog'>
+                    Maria
+                </div>
+                <div className='dialog'>
+                    Valeriy
+                </div>
+                <div className='dialog'>
+                    John
+                </div>
+            </div>
+
+            <div className='messages'>
+                <div className='message'>Hi</div>
+                <div className='message'>How are u guys?</div>
+                <div className='message'>Yo</div>
+            </div>
         </div>
     )
 }