In olden times the standard way to construct the layout on the right was using a table. Two rows, two columns, and some alignment parameters to put the buttons in the right place.As you can see from the HTML below, it's quite long-winded and potentially error prone. Have you forgotten to finish a table row, or closed too many table cells. Ideally, the layout should all be moved into CSS, and the HTML should contain only content.Well, lucky for us, some additions to CSS are coming to the rescue!
Soon we'll be able to build two-dimensional layouts using CSS Grid Layouts. This is currently a draft specification, but much of it has already been enabled in Chrome and Firefox, and some parts work in Edge and IE11. Using grids the HTML is much shorter and simpler, and the CSS is also short and easy to comprehend. In the CSS I've said put these items in a grid (
display:grid) with two columns (grid-template-columns: 1fr 1fr), and put the third item in column one, spanning two columns (grid-column: 1 / span 2).
For this example to work in Edge today you need to add a replacement for the alignment command, justify-self. Setting the margins or adding an alignment div should suffice.