Left 50%

HTML

<div class="container">
  <div class="child">
    <div class="grand-child"></div>
    <div class="grand-child"></div>
  </div>
</div>

CSS

.container {
  background: red;
  width: 60px;
  height: 50px;
  position: relative;
  border: 2px solid black;
}

.child {
  height: 50px;
  width: 100%;
  background: blue;
  left: 50%;
  position: absolute;
  opacity: 0.5;
  display: flex;
  flex-direction: row;
}

.grand-child {
  background: green;
  border: 1px solid pink;
  width: 100%;
}