JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <div class="half left"></div>
  <div class="half right">
      <div>
        <p>Line 1 ___________________</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <p>Line 5</p>
      </div>
      <div class="text_right">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <button>Details</button>
      </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.card {
  display: flex;
  max-width: 800px;
  height: 230px;
  margin: auto;
}
.half {
  width: 50%;
}
.half.left {
  background: #8BC34A;
  border-radius: 20px 0 0 20px;
}
.half.right {
  display: flex;
  padding: 30px 40px;
  background: #FFD54F;
  border-radius:  0 20px 20px 0;
}
.text_right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 1 auto;
}
button {
  margin-top: auto;
}
p {
  margin: 0 0 1em 0;
}