<h2>Before applying transformations</h2>
<div class="columns">
  <div class="square">1</div>
  <div class="square">2</div>
</div>

<h2>After applying transformations</h2>
<div class="columns">
  <div class="square translate">1</div>
  <div class="square relative">2</div>
</div>

body {
  font-family: sans-serif;
}

.columns {
  box-sizing: border-box;
  width: 500px;
  padding: 20px 0;
  border: 2px solid;

  column-count: 2;
  column-rule: 2px solid;
}

.square {
  width: 100px;
  height: 100px;
  margin: 0 auto;

  color: #fff;
  font-size: 1.5em;
  text-align: center;

  background: #03a9f4;
}

.translate {
  transform: translateX(50%);
}

.relative {
  position: relative;
  left: 50%;
}