<div class="card">
  <h2>Card name (takes 2 columns)</h2>
  <img src="https://q-cf.bstatic.com/images/hotel/max1024x768/263/263115690.jpg" alt="">
  <p class="description">Card description, more description (takes 1 column)</p>
  <p class="info">Additional info, additional info, more info (takes 2 columns)</p>
  <button type="button">Call us</button>
</div>
body {
  padding: 2rem;
}

.card {
  display: grid;
  grid-template-columns:
    20%
    20%
    1fr
    3fr
    0px;
  grid-template-rows: repeat(3, max-content);
  grid-gap: 1rem 2rem;
  align-items: center;
  
  width: 100%;
  box-sizing: border-box;
  min-width: 520px;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid black;
}

img {
  grid-row: 1 / -1;
  grid-column: 1 / span 2;
  align-self: stretch;
  width: 100%;
  object-fit: cover;
}

button {
  grid-row: 2;
  grid-column: 2 / 4;
  
  line-height: 3rem;
  background: tomato;
  color: white;
}

h2 {
  grid-column: span 2;
}

.description {
  grid-column: 4;
  
  color: #404040;
}

.info {
  grid-column: span 2;
  
  font-size: 125%;
  line-height: 1.3;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.