JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<div class="columns">
  <div class="col col--border"><img src="http://yagopnik.com/uploads/posts/2010-08/1281334328_x_0039b4c3.jpg" alt=""></div>
  <div class="col">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</div>

SCSS

body {
  padding: 30px;
}
.title {
  font: 48px sans-serif;
  position: relative;
  padding: 0 60px 20px;
  &:before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: -2px;
    left: 0;
    width: 40px;
    border-width: 2px 0 2px 2px;
    border-style: solid;
    border-color: red;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}
.columns {
  display: flex;
}
.col {
  padding-top: 40px;
  padding-right: 40px;
  &--border {
    position: relative;
    &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 20px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: red;
    border-top-right-radius: 20px;
  }
/*     border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: red;
    border-top-right-radius: 20px; */
  }
}