| <!DOCTYPE html><html class=''> | |
| <head><style> | |
| .wrapper { | |
| -webkit-column-count: 2; | |
| -moz-column-count: 2; | |
| column-count: 2; | |
| } | |
| .row { | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| } | |
| .pad-rows .row { | |
| padding-top: 12px; | |
| } | |
| /** | |
| * Other styles | |
| */ | |
| .description { | |
| margin: 0 1em; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| .description > ul > li + li { | |
| margin-top: 1em; | |
| } | |
| .description em { | |
| font-size: 0.875em; | |
| color: darkgray; | |
| } | |
| input { | |
| margin-left: 1em; | |
| } | |
| hr { | |
| margin: 1em 0; | |
| } | |
| </style></head><body> | |
| <div class="description"> | |
| <div class="wrapper"> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| </div> | |
| <hr> | |
| <div class="wrapper pad-rows"> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| <div class="row"><label>Label</label><input type="text"></div> | |
| </div> | |
| </body></html> |