Use CSS to lay out and style sections so they match a wireframe design

Author: hackertainment

Wireframe/index.html

@@ -13,18 +13,20 @@ <h1>Wireframe</h1>
         This is the default, provided code and no changes have been made yet.
       </p>
     </header>
-    <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
+    <main class="main">
+      <section class="content">
+        <article>
+          <img src="placeholder.svg" alt="" />
+          <h2>Title</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            voluptates. Quisquam, voluptates.
+          </p>
+          <a href="">Read more</a>
+        </article>
+      </section>
 
-      <section>
+      <section class="content">
         <article>
           <img src="placeholder.svg" alt="" />
           <h2>Title</h2>

Wireframe/style.css

@@ -41,6 +41,7 @@ p {
   margin: 0 auto;
 }
 
+
 /* Header */
 
 .header {
@@ -52,3 +53,21 @@ p {
   padding-top: 1rem;
   gap: 1rem;
 }
+
+
+/* Main */
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+
+/* Session */
+
+.content {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}