123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <h1>Create 3 same-height columns</h1>

<h2>With text and <code>columns</code> properties</h2>

<div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repellat ab reprehenderit maxime similique, veniam ratione eaque sit unde libero eius, accusamus aspernatur dolorum culpa esse neque perferendis sed, praesentium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum illum fugit inventore eum ipsa quod hic sed quia veniam labore velit officiis, nemo quisquam ducimus nam quibusdam facilis modi qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit dicta, maiores sit laborum quidem! Quod impedit perspiciatis saepe optio minus culpa iste, debitis aperiam ipsa vitae provident neque quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde non obcaecati suscipit voluptatem. Cupiditate eligendi itaque, libero fugit laudantium aperiam totam nobis ab saepe, veritatis, error ullam molestiae quam sunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores recusandae minus dolor velit vitae nostrum modi dignissimos animi explicabo vel repellendus, rerum praesentium, suscipit nobis facere facilis consequatur provident ab!
Sed, amet, deleniti! Velit, facilis dignissimos, quo vel quasi minus perferendis dolores, nam temporibus modi vitae impedit. Eaque adipisci hic earum nisi repudiandae ut unde doloribus odit qui. Cumque, dicta!
Magni molestiae ipsam iste! Qui mollitia, est accusamus eum debitis quisquam iusto unde facilis. Est incidunt, quas culpa ipsam dolore dignissimos repellendus labore porro magni cum, cumque harum? Non, molestiae.</div>

<h2>With the content you want and <code>display:table</code></h2>
<div class="table">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quia, quam delectus sequi odio fugit pariatur architecto, deleniti exercitationem quae adipisci ipsum ullam officia ea!</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, quod voluptates, vel nostrum ea distinctio, a tempore voluptas reiciendis doloremque veniam, accusantium. Veritatis ipsum modi doloribus enim sint magnam, delectus dolorum, aperiam! Eaque dolor, veniam eum sunt dolorem nostrum. Dolores, corporis! Magnam, amet quas? Voluptates eaque quaerat quia inventore, earum eveniet hic alias rem atque neque ab, reprehenderit dolore culpa, blanditiis! Maiores enim rerum architecto voluptatibus cumque. Debitis accusamus ea aut incidunt voluptatibus quibusdam rem sint laboriosam qui sit odio expedita illum iste consectetur fugit eaque commodi pariatur, porro ex delectus officia ratione necessitatibus totam. Necessitatibus est autem et.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque velit dolores ipsa maiores molestias minus iusto nulla consequatur saepe. Aspernatur nulla optio laborum ducimus dignissimos nisi itaque aliquam doloremque, iure qui. Corporis quas atque minus, eveniet delectus officiis dolor, neque, animi, deleniti adipisci esse! Ullam nesciunt, nemo fugit totam itaque.</div>
</div>

<h2>With the content you want and <code>display: flex;</code></h2>
<p>The best solution!</p>
<div class="flexbox">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quibusdam corporis officiis consequatur eveniet at ipsa deleniti consectetur fugiat similique illo alias perspiciatis quam repellendus, quisquam mollitia error corrupti vitae ut expedita numquam nemo aspernatur ratione maxime! Amet ea commodi itaque voluptatibus. Dolor repellat consequatur dicta ab repudiandae quo architecto.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quos dicta, reprehenderit laborum! Quidem repellendus culpa, quisquam laboriosam quam ducimus id sit fugit obcaecati aspernatur.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi explicabo, amet debitis natus enim magnam eos ab voluptate minima delectus. Tenetur porro possimus obcaecati harum facere est tempore cum enim dignissimos ducimus, eum illo quam cupiditate vel iusto voluptatum nesciunt nobis velit at, voluptatibus quos. Repudiandae nulla alias iure eligendi, saepe libero et dolor tempora.</div>
</div>
            
          
!
            
              /* COLUMNS partial solution */
.column {
  padding: 25px;
  columns: 3;
  column-rule: 15px solid #F2F2F2;
  background: #fff;
  background-clip: content-box;
}


/* TABLE solution */
.table {
  display: table;
  width: 100%;
  border-collapse: separate;
}
.table div {
  display: table-cell;
  width: 33.3333%;
  background: #FFF;
  border: 5px #F2F2F2 solid;
  padding: 20px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}


/* FLEXBOX solution */
.flexbox,
.flexbox > div {
  display: flex;
}
.flexbox > div {
  width: 50%;
  padding: 20px;
  margin: 10px;
  background: #FFF;
  box-shadow: 0 0 3px rgba(0,0,0,0.05)
}









/* Useless code */
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.95em;
  color: #333;
  background: #F2F2F2;
}
h1, h2 {
  font-weight: lighter;
  text-align: center;
}
h1 {
  font-size: 2.5em
}
h2 {
  margin-top: 4em;
}
h1+h2 {
  margin-top: 1.5em;
}
h2 + p {
  text-align: center;
  color: #555;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console