CodePen Embed - CSS column property basic

<p class="container"><img src="//dummyimage.com/600x400/666/fff" alt> Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita omnis velit quae provident delectus magni excepturi illo quas error sunt iusto adipisci, nostrum harum porro, consectetur aliquid veniam laborum. Quae, alias dicta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita omnis velit quae provident delectus magni excepturi illo quas error sunt iusto adipisci, nostrum harum porro, consectetur aliquid veniam laborum. Quae, alias dicta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita omnis velit quae provident delectus magni excepturi illo quas error sunt iusto adipisci, nostrum harum porro, consectetur aliquid veniam laborum. Quae, alias dicta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita omnis velit quae provident delectus magni excepturi illo quas error sunt iusto adipisci, nostrum harum porro, consectetur aliquid veniam laborum. Quae, alias dicta.</p>

<p>
  <a href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model">W3C - The Multi-Column Model</a>
</p>

.container {
  max-width: 640px;
  columns: 300px 2; /* <'column-width'> || <'column-count'> */
/* column-width: 300px; */ /* Minimum value of column width */
/* column-count: 2; */
  column-gap: 20px; /* normal == 1em */
  column-rule: 20px solid #0002; /* For test */
  background: #eee;
}
.container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 1em;
}

This Pen is owned by Jeong, ChanMyeong on CodePen.

See more by @naradesign on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.