Test Columns

by CreativeDreams

HTML

<div class="columns">
  
  <div class="column">
    I'm a bike messenger by day, aspiring actor by night, and this is my website.
  </div>
  
  <div class="column">
    I'm a bike messenger by day, aspiring actor by night, and this is my website.
  </div>
  
  <div class="column">
    I'm a bike messenger by day, aspiring actor by night, and this is my website.
  </div>
  
</div>

SCSS

.columns {
  --col-gap: 20px;
  
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--col-gap);
}

.column {
  flex: 1;
  
  &:nth-child(2) {
    background: red;
    margin-left: -100px;
  }
}






// column decorative styles
.column {
  padding: 15px;
  color: #F4F6F8;
  background: #306848;
  box-sizing: border-box;
}