<div class="container">
  <input type="checkbox" id="checkbox" name="checkbox">
  <div class="left"></div>
  <label class="right" for="checkbox">    </label>
</div>

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
input[type="checkbox"] {
  display: none;
}
.left {
  width: 0;
  height: 300px;
  background: red;
  transition: 0.3s width ease;
}
input[type="checkbox"]:checked ~ .left {
  width: 300px;
}
.right {
  width: calc(100% - 300px);
  height: 300px;
  background: blue;
  flex-grow: 1;
  border-left: 5px solid #000;
}