I am trying to display an adaptive display of images (svgs) and text in columns, that responds to changes in the window width. What I have below almost does the job but not quite, in that the display at the top of the columns is not what I would wish

1. in the left most column, there is a blank line at the top
2. in the other columns, there are multiple images at the top
3. also I have failed to line up the text with the centre of each image, despite adding a line height to the p element enclosing the text

Please could someone set me straight

```html
 <div style="column-width:230px; column-gap:20px">
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Advanced</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Advanced</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Alarm Sound</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Archive</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Backward/Undo</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;British National Grid</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Buy</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Calendar</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Cancel</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Circle (Shape)</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Clock</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Comment</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Compass</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Compass Degrees</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Compass Mils</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Compass Points</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Compass Rose</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Compress</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Contract Menu</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Copy</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Database</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Dates</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Dates</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Decide</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Decimal Lat Long</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Decrease</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Decrease</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Decrease Text Size</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Degrees Minutes Seconds</p>
    <div style="float:left"><svg width="32" height="32"><circle cx="16" cy="16" r="16" fill="#0000ff" /></svg></div><p line-height:32px">&nbsp;Delete</p>
    </div>
```

[![enter image description here](https://i.stack.imgur.com/qpTwp.jpg)](https://i.stack.imgur.com/qpTwp.jpg)