Flexbox Layout

by Saksham Malhotra

HTML

<div class="container">
  <div class="navItem">
    <div class="navHeading">Sample Heading 1</div>
    <div class="navDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, voluptates, velit! Magnam, nostrum debitis eos ad, esse quae similique quaerat dignissimos consequatur illo voluptatem minima quas rerum ipsam in consectetur.</div>
  </div>
  <div class="navItem">
    <div class="navHeading">Sample Heading 2</div>
    <div class="navDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, voluptates, velit! Magnam, nostrum debitis eos ad, esse quae similique quaerat dignissimos consequatur illo voluptatem minima quas rerum ipsam in consectetur.</div>
  </div>
</div>

CSS

.container {
  display: flex;
  font-family: Arial;
}

.navItem {
  flex: 1;
  padding: 10px;
}

.navHeading {
  padding: 10px;
  color: #fff;
  background-color: #0072bc;
}

.navItem {
  padding: 10px;
}

@media (max-width:600px) {
  .container {
    flex-direction: column;
  }
}