How can I display columns side-by-side with Flexbox or DIV?

Issue

I'm converting an old HTML site which has this layout:

body {
    font-family: Verdana, sans-serif;
    font-size: 14px;
    background-color: #FFF;
}

table {
    background-color: #FFF;
    width: 400px;
}

td, tr {
    border: 1px solid;
}

td img {
    width: 190px;
}

td img:after {
    content: "Image for illustration purposes only";
    font-weight: 300;
}

<h1>Stock list</h1>
<table>
    <tr>
        <td><img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
        <td><b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b></td>
    </tr>
    <tr>
        <td><img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg"></td>
        <td><b>1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</b> blue <b>£500</b></td>
    </tr>
    <tr>
        <td><img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg"></td>
        <td><b>1983 CHRYSLER E-CLASS 2.2 4dr</b> white, classic car <b>£3290</b></td>
    </tr>
</table>

Note that the after pseudo-selector did not display the text.

This is what I am aiming for as a design (although with the white background):

Advert design from magazine

I'm aware about column-gap for spacing of columns.

How would I do this with DIV and either Flex or grid?

So far I've tried:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}

div.autota {
    display: grid;
    width: 320px;
    border: 2px solid;
    columns: 2;
    margin-bottom: 15px;
}

div.autota img {
    height: 90px;
}

<div class="autota">
    <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
            <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
        </div>
        <div class="autota"><img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg">
    <b>1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</b> blue <b>£500</b>
        </div>
        <div class="autota">
    <img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg">
            <b>1983 CHRYSLER E-CLASS 2.2 4dr</b> white, classic car <b>£3290</b></div>

And this hasn't quite come out looking like the image linked to.

Solution

Your HTML content should look something like this:

<div class="grid-container">
   <div class="grid-item">
     <div class="autota">
        <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
        <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
     </div>
   </div>

   <div class="grid-item">
      Do the same as above for all items
   </div>
</div>

Then you can add CSS

.grid-container {
   display: grid;
}

And there are tons of different styles you can add to change the layout of your grid further! Take a look here once you've got the basic layout: CSS Grid Layout Module

Answered By - JDawwgy