Div arrangement using css table elements

by Chris Dennis

HTML

<div class=navlogorhs>
<div class=navlogo>
<img src="https://dalbergia17.fbcs.co.uk/wp-content/uploads/logos/dblogo2016alpha.png">
</div>
<div class=navrhs-cell>
<div class=navrhs-table>
<div class=navrow id=one>
<div class=x1>0210398102<br>389102398 </div>
</div>
<div class=navrow id=two>
<div class=x2>asdf  asdf sd fasdf sdf sdf asldkf jsladkfj sldkfj sladkfj lsdkfjlasdkfjsladkfj slakdjf  </div>
</div>
</div>
</div>
</div>

CSS

* {  margin:0;padding:0; box-sizing: border-box;  }
html,body {     height: 100%; }
div { padding: 4px; }
div.navlogorhs { display: table-row; }
div.navlogo { display: table-cell; }
div.navrhs { display: table-cell; background: mauve; }
div.navlogo { background: cyan; xwidth: 150px; }
div.navrhs-cell { display: table-cell; }
div.navrhs-table {
    display: table;
    xtable-layout: fixed;
    height: 100%;
    width: 100%;
    background: #123456;
 }
div.navrow {
    display: table-row;
    background: pink;
}
div.navrow div { display: table-cell; text-align: right }
div#one div { vertical-align: top; background: green; }
div#two div { vertical-align: bottom; background: yellow; }