<div class="card">
  <div class="button">1<br/>A</div>
  <div class="content"></div>
  <div class="button">OK</div>
</div>

<div class="card">
  <div class="button">1<br/>A</div>
  <div class="content">
    Sed facilisis venenatis egestas. Mauris dictum, ligula at scelerisque porta, felis augue hendrerit enim, ut rutrum eros ligula sed lacus. 
  </div>
  <div class="button">OK</div>
</div>

<div class="card">
  <div class="button">1<br/>B</div>
  <div class="content">
    Sed facilisis venenatis egestas. Mauris dictum, ligula at scelerisque porta, felis augue hendrerit enim, ut rutrum eros ligula sed lacus. 
        Sed facilisis venenatis egestas. Mauris dictum, ligula at scelerisque porta, felis augue hendrerit enim, ut rutrum eros ligula sed lacus. 
  </div>
  <div class="button">OK</div>
</div>

.card {
    display: grid;
    grid-template-columns: 45px 1fr 45px;
    align-content: center;
    user-select: none;
    overflow: hidden;
    background-color: #fff;
    margin: 1em 1em 0 1em;
    border-radius: 1em;
    position: relative;
    min-height: 1em;
    background: linear-gradient(0deg, rgba(200, 200, 200, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.card>.content {
    padding: 10px;
}

.card>.button {
    position: static;
    background-color: #00AAFF;
    color: #fff;
    display: grid;
    align-content: center;
    justify-content: center;
    cursor: pointer;
}

.card>.button:hover, .card>.button:focus {
    filter: brightness(0.8);
}

.card>.button:active {
    filter: brightness(0.6);
}

/* environment */
body {
    background: #aaa;
    padding: 0;
    margin: 0;
    font-family: Arial;
}