<h2>До применения трансформаций</h2>

<div class="columns">

  <div class="square">1</div>

  <div class="square">2</div>

</div>

​

<h2>После применения трансформаций</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;

}

​

.square {

  width: 100px;

  height: 100px;

  margin-bottom: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

​

  color: #fff;

  font-size: 1.5em;

​

  background: #03a9f4;

}

​

.translate {

  transform: translateX(50%);

}

​

.relative {

  position: relative;

  left: 50%;

}

​