Two column layout using flexbox with positioning in HTML

This is a simple tutorial to create a two column layout using flexbox CSS. Works with the content alignment.

HTML we have

<div class="background">
  <div class="row">
    <div class="column"><div class="1">I am in the first column in left.</div></div>
    <div class="column"><div class="2">I am in the first column in right.</div></div>
  </div>
</div>

or just keep it small.

<div class="row">
   <div class="column">Content 1</div>
   <div class="column">Content 2</div>
</div>

and use the following CSS.

/*  design @coderve.com
--------------------------------------------- */
.row {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}
.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  justify-content: center;
  align-items: stretch;
}
.column {
  width: 50%;
  float: left;
  padding: 10px;
  height: 200px;
}
.column:first-of-type {
  background: hsl(60deg 100% 78%);
  float: left;
  text-align: left;
  margin-left: 0;
}
.column:last-of-type {
  background: hsl(120deg 61% 78%);
  margin: 0;
  float: right;
  text-align: right;
  margin-left: auto;
}

done.