<div class="bricks">
    container width: 300px
    <br />
    bricks width: auto
    <div class="brick red">
      <span>red</span>
    </div>
    <div class="brick yellow">
      <span>yellow</span>
    </div>
    <div class="brick blue">
      <span>blue</span>
    </div>
  </div>

  <div class="bricks">
    container width: 300px
    <br />
    bricks width: auto
    <div class="brick red border-5">
      <span>red, 5px border</span>
    </div>
    <div class="brick yellow margin-5">
      <span>yellow, 5px margin</span>
    </div>
    <div class="brick blue padding-5">
      <span>blue, 5px padding</span>
    </div>
  </div>
:root {
  --red: #ee4d2d;
  --yellow: #ffa604;
  --blue: #16b6fb;
  --size: 300px;
  --dark: #42355e;
  font-family: Futura, sans-serif;
}
body {
  background: var(--dark);
}
.bricks {
  width: 300px;
  margin: 50px auto;
  color: white;
  border: 2px solid white;
  line-height: 2;
}
.brick {
  width: auto;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  border: auto;
  margin: auto;
/*   border: 4px solid white; */
/*   margin: 8px; */
}
.red {
  background: var(--red);
  color: var(--red);
  
}
.yellow {
  background: var(--yellow);
  color: var(--yellow);
  
}
.blue {
  background: var(--blue);
  color: var(--blue);
}
span {
  color: white;
  font-size: 16px;
}
.padding-5 {
  padding: 5px;
}
.margin-5 {
  margin: 5px;
}
.border-5 {
  border: 5px dashed white;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.