<div class="row">
  <h3>Left Side</h3>
  <svg viewbox="0 0 10 10">
    <polygon points="0,0 8,0 0,10" fill="#222222" stroke="#222222" />
    <polygon points="10,0 2,10 10,10" fill="#c92429" stroke="#c92429" />
  </svg>
  <h3>Right Side</h3>
</div>

* {
  margin: 0;
}

.row {
  display: flex;
  margin: 20px 0;
  color: #fff;
}

.row > h3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.row > h3:first-child {
  flex: 30%;
  background-color: #222222;
  color: #fff;
}

.row > h3:last-child {
  flex: 70%;
  background-color: #c92429;
}

svg {
  height: 50px;
}