<div class="flag card flag-top">
  <div class="flag__item">
    <img src="https://unsplash.it/70/70/?random" alt="" />
  </div>
  <div class="flag__item">
    <h3 class="flag__item--heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aliquam laboriosam voluptatibus minima quidem laudantium, quae necessitatibus assumenda debitis similique expedita inventore amet explicabo, voluptate, ipsam ea voluptas, quia. Neque nisi quis rem voluptas asperiores excepturi fugiat facilis ea, earum ipsa dolorem obcaecati odit voluptates. Hic odio amet neque blanditiis.</p>
  </div>
</div>
<div class="flag card flag-middle">
  <div class="flag__item">
    <img src="https://unsplash.it/70/70/?random" alt="" />
  </div>
  <div class="flag__item">
    <h3 class="flag__item--heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aliquam laboriosam voluptatibus minima quidem laudantium, quae necessitatibus assumenda debitis similique expedita inventore amet explicabo, voluptate, ipsam ea voluptas, quia. Neque nisi quis rem voluptas asperiores excepturi fugiat facilis ea, earum ipsa dolorem obcaecati odit voluptates. Hic odio amet neque blanditiis.</p>
  </div>
</div>
<div class="flag card flag-bottom">
  <div class="flag__item">
    <img src="https://unsplash.it/70/70/?random" alt="" />
  </div>
  <div class="flag__item">
    <h3 class="flag__item--heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aliquam laboriosam voluptatibus minima quidem laudantium, quae necessitatibus assumenda debitis similique expedita inventore amet explicabo, voluptate, ipsam ea voluptas, quia. Neque nisi quis rem voluptas asperiores excepturi fugiat facilis ea, earum ipsa dolorem obcaecati odit voluptates. Hic odio amet neque blanditiis.</p>
  </div>
</div>
.flag {
  display: table;
  width: 100%;
  
  &__item {
    display: table-cell;
    
    .flag-top & {
      vertical-align: top;
    }
    
    .flag-middle & {
      vertical-align: middle;
    }
    
    .flag-bottom & {
      vertical-align: bottom;
    }
    
    > img {
      display: block;
    }
    
    &--heading {
      margin: 0;
      
      + p {
        margin-top: 20px;
      }
    }
  }
  &__item + &__item {
    padding-left: 20px;
  }
}

.card {
  border: 1px solid #ccc;
  padding: 20px;
  max-width: 70%;
  margin: 20px auto;
  
  p:last-of-type {
    margin-bottom: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.