Boxes

by Sam Ojling

HTML

<div class="column-wrapper">
  <div class="column-1">
    <div class="box">
      <p>
        hello and good luck!
      </p>
    </div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

CSS

.column-wrapper {
  display: flex;
  flex-direction: row;
}
.column-1, .column-2, .column-3 {
  display: inline-flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
} 
.box {
  background-color: red;
  height: auto;
  min-height: 100px;
  margin: 10px;
  width: 100%;
}
.box p {
  font-size: 40px;
}