Create a flexible parent container with child divs, each with padding, background, and border.

by anoopsuda

HTML

<div class="parent">
  <div class="child child-1">Child 1</div>
  <div class="child child-2">Child 2</div>
  <div class="child child-3">Child 3</div>
</div>

CSS

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  padding: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* 2 columns */
.child-1,
.child-2 {
  width: 50%;
}

/* next line full width */
.child-3 {
  width: 100%;
}