<h2>Media Object</h2>

<div class="media">
  <div class="asset"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="hot air balloons"></div>
  <div class="content">
    <p>The first ascent, made in June from the Paris Observatory, though a lofty one, was attended with so much danger and confusion as to be barren of results. The departure, owing to stormy weather, was hurried and illordered, so that the velocity in rising was excessive, the net constricted the rapidly-swelling globe, and the volumes of out-rushing gas half-suffocated the voyagers. Then a large rent occurred, which caused an alarmingly rapid fall, and the two philosophers were reduced to the necessity of flinging away all they possessed, their instruments only excepted.</p>
    
  </div>
  
</div>

<h2>Media Object constrained by a wrapper</h2>

<div class="wrapper">
  <div class="media">
  <div class="asset"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="hot air balloons"></div>
  <div class="content">
    <p>The first ascent, made in June from the Paris Observatory, though a lofty one, was attended with so much danger and confusion as to be barren of results. The departure, owing to stormy weather, was hurried and illordered, so that the velocity in rising was excessive, the net constricted the rapidly-swelling globe, and the volumes of out-rushing gas half-suffocated the voyagers. Then a large rent occurred, which caused an alarmingly rapid fall, and the two philosophers were reduced to the necessity of flinging away all they possessed, their instruments only excepted.</p>
    
  </div>
  
</div>
  
</div>

html {
  font: 1.1em/1.4 Helvetica, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

p {
  margin: 0 0 1em 0;
}

* { box-sizing: border-box; }

.media {
  display: flex;
  flex-wrap: wrap;
  border: 5px solid rgb(86,98,110);
  border-radius: 5px;
  margin-bottom: 2em;
}

.media > * {
  flex: 1 1 250px;
  margin: 10px;
}

.wrapper {
  width: 450px;
  border: 2px dotted #999;
}