Media left row

.card-006 {
  display: flex;
  width: 460px;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #18181b;
  transition: box-shadow .2s
}
.card-006:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1)
}
.card-006__img {
  flex: 0 0 150px;
  background: linear-gradient(145deg,#fde68a,#f59e0b)
}
.card-006__body {
  padding: 18px 20px
}
.card-006 h3 {
  margin: 0 0 6px;
  font-size: 17px
}
.card-006 p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #52525b
}
.card-006 a {
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  text-decoration: none
}
.card-006 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

<article class="card-006">
  <div class="card-006__img"></div>
  <div class="card-006__body">
    <h3>Typography audit checklist</h3>
    <p>Twelve checks before you ship a type scale.</p>
    <a href="#">Open checklist</a>
  </div>
</article>