tatertrot

by chrimbus

HTML

<div class="box left">
  <p>
    testing
  </p>
  <div>
    div
  </div>
</div>
<div class="box right"></div>
<hr>
<table>
  <tr>
    <td>Hello</td>
    <td>Oh Hi</td>
  </tr>
</table>
<hr>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>

SCSS

.box {
  border: 1px solid red;


  p,
  div {
    vertical-align: bottom;
    display: inline-block;
    width: 40%;
  }
  p {
    background: yellow;
  }
  div {
    background: blue;
    color: white;
  }
}

.right {
  height: 50px;
}

.box1,
.box2,
.box3 {
  width: 100px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-direction: row-reverse;
  /* Safari 6.1+ */
  display: flex;
  flex-direction: row-reverse;
}