<h1>Using Logical Properties</h1>

<main>
  <ul>
    <li>
      <div class="media"></div>
      <h2>Title 1</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    </li>
    <li>
      <div class="media"></div>
      <h2>Title 2</h2>
    <p>Nam doloribus, numquam similique minima officiis modi molestiae.</p>
    </li>
    <li>
      <div class="media"></div>
      <h2>Title 3</h2>
      <p>Vel quae totam non doloremque reiciendis ex nisi.</p>
    </li>
  </ul>
</main>

<p class="longform">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam itaque laborum recusandae laboriosam ex suscipit, maiores voluptas optio necessitatibus laudantium voluptate autem? Quisquam totam voluptatum obcaecati, impedit fuga est beatae!
Non, ipsum? Quaerat, fugit ab ut natus quos magnam. Mollitia perferendis numquam accusantium doloribus eligendi cupiditate magni voluptates! Vero nulla quos ipsa quibusdam maxime assumenda nesciunt nihil tenetur porro doloremque!
Unde provident quaerat repudiandae. Nobis architecto illum non provident laborum aut ea, temporibus repellendus expedita illo, perferendis soluta modi totam dolores ut ex laudantium sequi assumenda nesciunt placeat officia quibusdam.
Aperiam natus officia doloremque? Aliquid earum eius fuga vel nam aspernatur illo perspiciatis voluptatum nisi recusandae praesentium libero vitae, vero repellendus? Soluta natus error sint ex eligendi, quam quisquam. Id.
Obcaecati a dicta, unde adipisci eum expedita praesentium. Placeat animi qui omnis est aut molestiae consequatur fugiat. Recusandae, vero. Fugiat minus magni nesciunt repellat sequi perspiciatis aspernatur? Nobis, illum nesciunt!</p>
body {
  font-family: 'Roboto';
}

.media {
  width: 150px;
  height: 150px;
  background: #6200ee;
}

li {
  list-style: none;
  block-size: 300px;
  inline-size: 200px;
  border: 1px solid #6200ee;
  background: #efeaff;
  padding: 1rem;
}

ul {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
  padding: 0;
}

body {
  width: 80vw;
  margin: 0 auto;
}

h2 {
  text-transform: uppercase;
  font-size: 1.25rem;
}

h2, p {
  margin-inline-start: 3rem;
}

main {
  margin-block-start: 3rem;
  border-block-start: 2px dashed #6200ee;
}

h1 {
  font-size: 3rem;
  font-weight: 100;
}

.longform {
  line-height: 2;
  font-weight: 100;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.