LayoutTests/fast/multicol/flexbox-rows.html

   1 <!DOCTYPE html><html class=''>
   2     <head><style>
   3         .wrapper {
   4             -webkit-column-count: 2;
   5             -moz-column-count: 2;
   6             column-count: 2;
   7         }
   8
   9         .row {
  10             display: -webkit-box;
  11             display: -ms-flexbox;
  12             display: flex;
  13         }
  14
  15         .pad-rows .row {
  16             padding-top: 12px;
  17         }
  18
  19         /**
  20          * Other styles
  21          */
  22         .description {
  23             margin: 0 1em;
  24             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  25             font-size: 14px;
  26             line-height: 1.5;
  27         }
  28         .description > ul > li + li {
  29             margin-top: 1em;
  30         }
  31         .description em {
  32             font-size: 0.875em;
  33             color: darkgray;
  34         }
  35
  36         input {
  37             margin-left: 1em;
  38         }
  39
  40         hr {
  41             margin: 1em 0;
  42         }
  43         </style></head><body>
  44             <div class="description">
  45
  46             <div class="wrapper">
  47             <div class="row"><label>Label</label><input type="text"></div>
  48             <div class="row"><label>Label</label><input type="text"></div>
  49             <div class="row"><label>Label</label><input type="text"></div>
  50             <div class="row"><label>Label</label><input type="text"></div>
  51             <div class="row"><label>Label</label><input type="text"></div>
  52             </div>
  53             <hr>
  54             <div class="wrapper pad-rows">
  55             <div class="row"><label>Label</label><input type="text"></div>
  56             <div class="row"><label>Label</label><input type="text"></div>
  57             <div class="row"><label>Label</label><input type="text"></div>
  58             <div class="row"><label>Label</label><input type="text"></div>
  59             <div class="row"><label>Label</label><input type="text"></div>
  60             </div>
  61
  62             </body></html>