Q:

CSS to duplicate one row table

I need to convert the above from a 1 row table into CSS so it can adjust size without issues if a phone is being used. I tried a number of things with CSS but no luck.
Notice the text is centered vertically and horizontally, there is space all around the text, there is no spacing between the table cells, so no white space in between each cell. Also the entire row should be centered horizontally.
How can I make it look like this on the desktop and also look nice on a mobile phone? Should I still use a table and if so how can I keep it looking good on a mobile phone?

A:

For vertical aligning, you can use "line-height" value. This also determines approximately how height the box will be.
For horizontal aligning, you can use "text-align: center".
I guess you already know "background-color" to set the colour of background.
Also, you can use "padding-left" and "padding-right" to put some space around.
If you use "div" blocks as "display: inline-block", and then do not put any new line between them, there won't be any space between them. Like below:

<div class="box1">16 Active</div><div class="box2">1 In Escrow"</div>

