css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <div class="container">
  <figure class="textImage-container textImage-container--left textImage-has--maxWidth" style="max-width: 320px;">
    <img src="http://dummyimage.com/640x400/000/fff.png&text=max0x2Dwidth0x3A+320px0x3B" alt="" class="textImage-image"/>	
    <figcaption class="textImage-caption">Sugar plum sweet pastry. Gummi bears sweet roll tart. Marzipan candy carrot cake topping applicake sesame snaps dessert.</figcaption>
  </figure>
  <p>Sugar plum sweet pastry. Gummi bears sweet roll tart. Marzipan candy carrot cake topping applicake sesame snaps dessert. Dragée bonbon carrot cake candy. Wafer oat cake liquorice croissant donut. Jelly croissant marshmallow liquorice dessert toffee soufflé donut. Tart pastry chupa chups gummies wafer sweet. Liquorice liquorice powder. Lemon drops candy dragée gummi bears liquorice pastry. Jelly-o sesame snaps powder caramels toffee applicake. Jujubes liquorice tootsie roll. Chocolate bar jelly apple pie liquorice dessert sugar plum. Bonbon bear claw sweet carrot cake oat cake wafer muffin lollipop soufflé. Sugar plum wafer pudding.</p>
  <p>Cupcake biscuit pastry muffin bear claw. Marshmallow cupcake toffee sweet danish bonbon gummi bears candy toffee. Candy canes cheesecake toffee gummi bears danish jelly beans. Lemon drops halvah jujubes oat cake jujubes toffee. Pie gummi bears candy canes chocolate jelly beans candy. Danish sweet roll dessert unerdwear.com candy canes. Candy lemon drops chocolate bar topping jelly beans jujubes. Liquorice jujubes pudding sugar plum jelly beans bonbon. Fruitcake caramels powder pie toffee jelly unerdwear.com lemon drops. Topping danish danish brownie apple pie gingerbread sweet roll. Brownie oat cake topping bear claw topping cupcake jelly-o halvah macaroon. Donut lollipop lemon drops marshmallow lemon drops pastry chocolate cake. Unerdwear.com sweet unerdwear.com. Gingerbread lollipop chocolate cake dragée tart oat cake.</p>
  <p>Caramels tiramisu cake danish liquorice topping macaroon. Tart halvah fruitcake jelly beans caramels. Tiramisu ice cream chupa chups biscuit marzipan sweet roll bear claw macaroon jelly beans. Dragée chocolate cake liquorice. Wafer gummies cotton candy gummi bears marshmallow. Donut cheesecake chocolate bonbon ice cream dragée lollipop tiramisu candy canes. Tiramisu gummies liquorice cupcake. Pudding chocolate cake dragée oat cake lollipop halvah fruitcake toffee pastry. Jelly-o candy applicake gummies candy cheesecake brownie jujubes cookie. Cake ice cream lollipop muffin. Pudding chocolate cake biscuit pudding marzipan cookie applicake gummi bears. Sugar plum sweet bear claw marshmallow jelly-o chocolate bar gummies sweet danish.</p>
  <p>Apple pie pudding topping icing. Chocolate bar powder donut gingerbread halvah jelly-o. Gingerbread sesame snaps chocolate cake jujubes chocolate bar. Sugar plum fruitcake soufflé. Sweet cake cookie cheesecake cookie biscuit chupa chups marshmallow carrot cake. Sweet roll cheesecake tiramisu macaroon icing brownie. Pie chocolate liquorice candy canes cupcake sesame snaps caramels soufflé. Jujubes chupa chups lemon drops marzipan chocolate cake candy chocolate bar. Cotton candy bear claw chocolate cake. Topping tiramisu chupa chups. Dragée jujubes tart carrot cake lemon drops toffee tart cake. Gummi bears sweet tiramisu cake jelly-o biscuit unerdwear.com jelly beans. Pastry lollipop muffin candy.</p>
  <p>Liquorice tart jelly-o ice cream pastry. Jelly carrot cake candy canes apple pie tiramisu brownie lemon drops. Macaroon pastry cake jujubes soufflé applicake. Muffin oat cake topping unerdwear.com applicake caramels brownie soufflé. Lollipop candy canes croissant gingerbread tootsie roll marshmallow. Caramels halvah topping marshmallow bonbon gummi bears dragée chocolate cake dessert. Lemon drops lemon drops cheesecake croissant bear claw brownie. Gummies lollipop croissant sugar plum lollipop. Applicake unerdwear.com macaroon chocolate bar cupcake sweet roll candy canes danish marzipan. Cupcake tiramisu gummies marzipan macaroon tart candy jujubes topping. Ice cream liquorice jelly sweet marzipan soufflé. Halvah chocolate cake croissant halvah. Croissant halvah apple pie jelly-o.</p>
  <figure class="textImage-container textImage-container--right textImage-has--maxHeight">
    <img src="http://dummyimage.com/1280x800/000/fff.png&text=max0x2Dheight0x3A+320px0x3B" alt="" class="textImage-image" style="max-height: 320px;"/>	
    <figcaption class="textImage-caption">Sugar plum sweet pastry. Gummi bears sweet roll tart. Marzipan candy carrot cake topping applicake sesame snaps dessert.</figcaption>
  </figure>
  <p>Sugar plum sweet pastry. Gummi bears sweet roll tart. Marzipan candy carrot cake topping applicake sesame snaps dessert. Dragée bonbon carrot cake candy. Wafer oat cake liquorice croissant donut. Jelly croissant marshmallow liquorice dessert toffee soufflé donut. Tart pastry chupa chups gummies wafer sweet. Liquorice liquorice powder. Lemon drops candy dragée gummi bears liquorice pastry. Jelly-o sesame snaps powder caramels toffee applicake. Jujubes liquorice tootsie roll. Chocolate bar jelly apple pie liquorice dessert sugar plum. Bonbon bear claw sweet carrot cake oat cake wafer muffin lollipop soufflé. Sugar plum wafer pudding.</p>
  <p>Cupcake biscuit pastry muffin bear claw. Marshmallow cupcake toffee sweet danish bonbon gummi bears candy toffee. Candy canes cheesecake toffee gummi bears danish jelly beans. Lemon drops halvah jujubes oat cake jujubes toffee. Pie gummi bears candy canes chocolate jelly beans candy. Danish sweet roll dessert unerdwear.com candy canes. Candy lemon drops chocolate bar topping jelly beans jujubes. Liquorice jujubes pudding sugar plum jelly beans bonbon. Fruitcake caramels powder pie toffee jelly unerdwear.com lemon drops. Topping danish danish brownie apple pie gingerbread sweet roll. Brownie oat cake topping bear claw topping cupcake jelly-o halvah macaroon. Donut lollipop lemon drops marshmallow lemon drops pastry chocolate cake. Unerdwear.com sweet unerdwear.com. Gingerbread lollipop chocolate cake dragée tart oat cake.</p>
  <p>Caramels tiramisu cake danish liquorice topping macaroon. Tart halvah fruitcake jelly beans caramels. Tiramisu ice cream chupa chups biscuit marzipan sweet roll bear claw macaroon jelly beans. Dragée chocolate cake liquorice. Wafer gummies cotton candy gummi bears marshmallow. Donut cheesecake chocolate bonbon ice cream dragée lollipop tiramisu candy canes. Tiramisu gummies liquorice cupcake. Pudding chocolate cake dragée oat cake lollipop halvah fruitcake toffee pastry. Jelly-o candy applicake gummies candy cheesecake brownie jujubes cookie. Cake ice cream lollipop muffin. Pudding chocolate cake biscuit pudding marzipan cookie applicake gummi bears. Sugar plum sweet bear claw marshmallow jelly-o chocolate bar gummies sweet danish.</p>
  <p>Apple pie pudding topping icing. Chocolate bar powder donut gingerbread halvah jelly-o. Gingerbread sesame snaps chocolate cake jujubes chocolate bar. Sugar plum fruitcake soufflé. Sweet cake cookie cheesecake cookie biscuit chupa chups marshmallow carrot cake. Sweet roll cheesecake tiramisu macaroon icing brownie. Pie chocolate liquorice candy canes cupcake sesame snaps caramels soufflé. Jujubes chupa chups lemon drops marzipan chocolate cake candy chocolate bar. Cotton candy bear claw chocolate cake. Topping tiramisu chupa chups. Dragée jujubes tart carrot cake lemon drops toffee tart cake. Gummi bears sweet tiramisu cake jelly-o biscuit unerdwear.com jelly beans. Pastry lollipop muffin candy.</p>
  <p>Liquorice tart jelly-o ice cream pastry. Jelly carrot cake candy canes apple pie tiramisu brownie lemon drops. Macaroon pastry cake jujubes soufflé applicake. Muffin oat cake topping unerdwear.com applicake caramels brownie soufflé. Lollipop candy canes croissant gingerbread tootsie roll marshmallow. Caramels halvah topping marshmallow bonbon gummi bears dragée chocolate cake dessert. Lemon drops lemon drops cheesecake croissant bear claw brownie. Gummies lollipop croissant sugar plum lollipop. Applicake unerdwear.com macaroon chocolate bar cupcake sweet roll candy canes danish marzipan. Cupcake tiramisu gummies marzipan macaroon tart candy jujubes topping. Ice cream liquorice jelly sweet marzipan soufflé. Halvah chocolate cake croissant halvah. Croissant halvah apple pie jelly-o.</p>
  <figure class="textImage-container textImage-container--left">
    <img src="http://dummyimage.com/640x400/000/fff.png&text=The+caption+width+issue" alt="" class="textImage-image"/>
    <figcaption class="textImage-caption">Sugar plum sweet pastry. Gummi bears sweet roll tart. Marzipan candy carrot cake topping applicake sesame snaps dessert.</figcaption>
  </figure>
  <p>Sugar plum sweet pastry. Gummi bears sweet roll tart. Marzipan candy carrot cake topping applicake sesame snaps dessert. Dragée bonbon carrot cake candy. Wafer oat cake liquorice croissant donut. Jelly croissant marshmallow liquorice dessert toffee soufflé donut. Tart pastry chupa chups gummies wafer sweet. Liquorice liquorice powder. Lemon drops candy dragée gummi bears liquorice pastry. Jelly-o sesame snaps powder caramels toffee applicake. Jujubes liquorice tootsie roll. Chocolate bar jelly apple pie liquorice dessert sugar plum. Bonbon bear claw sweet carrot cake oat cake wafer muffin lollipop soufflé. Sugar plum wafer pudding.</p>
  <p>Cupcake biscuit pastry muffin bear claw. Marshmallow cupcake toffee sweet danish bonbon gummi bears candy toffee. Candy canes cheesecake toffee gummi bears danish jelly beans. Lemon drops halvah jujubes oat cake jujubes toffee. Pie gummi bears candy canes chocolate jelly beans candy. Danish sweet roll dessert unerdwear.com candy canes. Candy lemon drops chocolate bar topping jelly beans jujubes. Liquorice jujubes pudding sugar plum jelly beans bonbon. Fruitcake caramels powder pie toffee jelly unerdwear.com lemon drops. Topping danish danish brownie apple pie gingerbread sweet roll. Brownie oat cake topping bear claw topping cupcake jelly-o halvah macaroon. Donut lollipop lemon drops marshmallow lemon drops pastry chocolate cake. Unerdwear.com sweet unerdwear.com. Gingerbread lollipop chocolate cake dragée tart oat cake.</p>
  <p>Caramels tiramisu cake danish liquorice topping macaroon. Tart halvah fruitcake jelly beans caramels. Tiramisu ice cream chupa chups biscuit marzipan sweet roll bear claw macaroon jelly beans. Dragée chocolate cake liquorice. Wafer gummies cotton candy gummi bears marshmallow. Donut cheesecake chocolate bonbon ice cream dragée lollipop tiramisu candy canes. Tiramisu gummies liquorice cupcake. Pudding chocolate cake dragée oat cake lollipop halvah fruitcake toffee pastry. Jelly-o candy applicake gummies candy cheesecake brownie jujubes cookie. Cake ice cream lollipop muffin. Pudding chocolate cake biscuit pudding marzipan cookie applicake gummi bears. Sugar plum sweet bear claw marshmallow jelly-o chocolate bar gummies sweet danish.</p>
  <p>Apple pie pudding topping icing. Chocolate bar powder donut gingerbread halvah jelly-o. Gingerbread sesame snaps chocolate cake jujubes chocolate bar. Sugar plum fruitcake soufflé. Sweet cake cookie cheesecake cookie biscuit chupa chups marshmallow carrot cake. Sweet roll cheesecake tiramisu macaroon icing brownie. Pie chocolate liquorice candy canes cupcake sesame snaps caramels soufflé. Jujubes chupa chups lemon drops marzipan chocolate cake candy chocolate bar. Cotton candy bear claw chocolate cake. Topping tiramisu chupa chups. Dragée jujubes tart carrot cake lemon drops toffee tart cake. Gummi bears sweet tiramisu cake jelly-o biscuit unerdwear.com jelly beans. Pastry lollipop muffin candy.</p>
  <p>Liquorice tart jelly-o ice cream pastry. Jelly carrot cake candy canes apple pie tiramisu brownie lemon drops. Macaroon pastry cake jujubes soufflé applicake. Muffin oat cake topping unerdwear.com applicake caramels brownie soufflé. Lollipop candy canes croissant gingerbread tootsie roll marshmallow. Caramels halvah topping marshmallow bonbon gummi bears dragée chocolate cake dessert. Lemon drops lemon drops cheesecake croissant bear claw brownie. Gummies lollipop croissant sugar plum lollipop. Applicake unerdwear.com macaroon chocolate bar cupcake sweet roll candy canes danish marzipan. Cupcake tiramisu gummies marzipan macaroon tart candy jujubes topping. Ice cream liquorice jelly sweet marzipan soufflé. Halvah chocolate cake croissant halvah. Croissant halvah apple pie jelly-o.</p>
</div>
            
          
!
            
              // small reset
figure {
  margin: 0;
}

p {
  margin-top: 0;
}

%clearfix {
  &:before,
  &:after {
    content: ' ';
    display: table;
  }
  
  &:after {
    clear: both;
  }
}

.container {
  @extend %clearfix;
  margin: 0 auto;
  max-width: 1280px;
}

.textImage-container {
  max-width: 100%; // needed for Firefox and IE for `max-width` of .textImage-image :(
  margin-bottom: 1em;
}

.textImage-has--maxHeight {
  display: table;
}

.textImage-container--left {
  float: left;
  margin-right: 1em;
}

.textImage-container--right {
  float: right;
  margin-left: 1em;
}

.textImage-image {
  max-width: 100%;
  height: auto;
}

.textImage-caption {
  font-size: 80%;
  
  .textImage-has--maxHeight & {
    display: table-caption;
    caption-side: bottom;
  }
}

// arbitrary “mobile” viewport media query
@media (max-width: 480px) {
  .textImage-container {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  
  .textImage-has--maxWidth {
    max-width: 100% !important; // to trump specificity of inline style
  }
  
  .textImage-has--maxHeight {
    display: block;
    max-height: none !important; // to trump specificity of inline style
  }
  
  .textImage-caption {
    
    .textImage-has--maxHeight & {
      display: block;
    }
  }
}


            
          
!
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.
Loading ..................

Console