Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .wrap
	.col_wrap.v1_mod
		.col
			p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse aut praesentium sequi eaque reiciendis quae, tempore soluta veniam numquam asperiores reprehenderit ullam illum deleniti eveniet ipsum non, quos labore eius tempora dolore quia, id harum. Nulla ut iure minima architecto ipsam porro. Totam est atque animi illo eligendi sapiente delectus.
	.col_wrap.v2_mod 
		.col
			p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, officia deserunt quasi repudiandae facilis, voluptatibus facere quisquam corporis iste. Eligendi doloremque iste error officia. Magnam recusandae, doloribus sequi magni unde accusantium, ipsam qui aliquid, eaque sapiente totam nobis distinctio explicabo nam quam quibusdam. Officiis totam libero, autem incidunt reiciendis, architecto at fuga laudantium quasi beatae laborum ad vitae, repellat. Accusantium error quibusdam delectus, sint harum fugit corrupti a aspernatur quasi esse dolores facere eos in architecto unde dolorum non! Totam autem, facilis ad laboriosam, repudiandae numquam asperiores distinctio nemo nam! Cumque totam repellat ipsa soluta laboriosam quaerat assumenda, dignissimos cupiditate quis rem atque id doloremque nihil nemo sunt, velit optio facilis. Corporis exercitationem ea provident, assumenda minima temporibus cupiditate similique explicabo a quaerat quasi illum culpa aspernatur ducimus est dignissimos quisquam dicta fuga nostrum fugiat dolorum excepturi cumque. Sequi nihil officia qui autem cum sed, non accusantium reprehenderit laboriosam earum recusandae tenetur adipisci placeat eius cupiditate ducimus quod aliquid quis ipsa, neque ab. Natus, reiciendis placeat libero vel, numquam ipsa rem. Doloremque eius mollitia modi! Dolore deleniti saepe beatae libero magni sequi asperiores, error sapiente quaerat labore fugiat repellendus laudantium doloribus, deserunt aut culpa dolorum ducimus quia, minus? Explicabo magni aspernatur, sit commodi possimus fugiat tempore fuga! Vero, autem, rerum quaerat quo quidem iure dolorum sapiente nulla quisquam! Sequi similique deleniti et doloribus delectus consectetur pariatur sapiente quibusdam, perferendis repudiandae at eveniet molestiae quas omnis error nobis dolorum placeat autem reprehenderit vitae atque iure magni nesciunt iste! Cumque, porro! Facilis, aperiam eum. Esse, quisquam, pariatur voluptate ad aliquam eius sed distinctio voluptas quam ipsum praesentium accusantium iste voluptatem quis inventore. Placeat illo, alias vel nisi laboriosam labore molestiae consectetur quam perspiciatis cupiditate officia necessitatibus nobis soluta saepe quas omnis eos sit. Dicta temporibus modi quia qui numquam expedita dignissimos?
	.col_wrap.v3_mod 
		.col 
			p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam similique cupiditate deleniti libero tenetur, veritatis nihil aspernatur repellendus sed quis? Atque, repudiandae ab reiciendis eius cum dolore ex aut adipisci ad dolorem aperiam natus porro. Suscipit, veritatis dignissimos fugiat explicabo voluptas odio cumque deleniti, unde, molestias error deserunt dolores quas hic magnam sit illo, facilis! Veniam temporibus repellendus molestias deleniti quibusdam eius enim! Aut voluptatem similique accusantium! Obcaecati voluptatibus repellat perferendis, magni aliquam praesentium ad dolore nihil voluptate rerum sunt mollitia ducimus, neque velit, illum. Voluptas, fugit? Numquam, mollitia eum laboriosam rem, delectus veniam, recusandae quis minus incidunt laborum nobis?
              
            
!

CSS

              
                * {box-sizing: border-box;}
body {background-color: #ccc;}

.wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 0 -20px -20px;
	padding: 20px;
}

.col_wrap {
	padding: 0 0 20px 20px;
	
	&.v1_mod {flex: 3 1 400px;}
	&.v2_mod {flex: 3 1 400px;}
	&.v3_mod {flex: 1 1 200px;}
}

.col {
	width: 100%;
	height: 100%;
	padding: 20px;
	background: #fff;	
}
              
            
!

JS

              
                
              
            
!
999px

Console