Making text align with DIV in div-based HTML page in CSS?

Question

My page for a clone script can be found at https://jsfiddle.net/k68dm4wj/

The problem is getting the text and image for a DIV to align next to the image with a small amount of space between the top and next to the image, like this example .

This is my code, taken from the JSFiddle above:

<div class="card">
      <img class="listing-main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg/880px-Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg">

      <div class="card-info">
        <h2 class="listing-title title-wrap"><a href="http://">Audi A6 Allroad Sport 55 TFSI 340PS 3.0</a></h2>


                                                <p class="listing-attention-grabber ">BRAND NEW 2020 CAR</p>
                                                <ul class="listing-key-specs ">


                                                                <li>2020 (20) reg</li>

                                                                <li>Estate</li>

                                                                <li>40 miles</li>

                                                                <li>3.0L</li>

                                                                <li>339BHP</li>

                                                                <li>Automatic</li>

                                                                <li>Petrol</li>

                                                                <li>1 owners</li>


                                                    </ul>
                                                 <ul class="listing-extra-detail">



                                                 </ul>


                                                        <p class="listing-description">2020 (20) reg, black, 40 miles £46,796</p>
                                                <div class="seller-info ">
                                                        <div class="phone-code">
                                                                    Tel: (0114) 49600000
                                                    </div>
                                                    <div class="seller-type">
                                                                    Trade seller
                                                    </div>

                                                            <div class="seller-location">
                                                <span class="seller-town">Sheffield</span> - 
                                                                43 miles away
                                                            </div>

                                                </div>                  


      </div>
      <section class="price-column">
      <div class="vehicle-price">£46,795</div>
      </section>
    </div>

Although my code works properly, getting it to look similar to the page I linked to - at least for the DIV part of my code is the main problem. This relates to where I have.

There is also a second problem; I want to include smaller images and allow the user to scroll through them with jQuery or javascript, but the main image in remains the first one; also, how to include a logo after the images at the end like in the linked-to page (if there's one needed; not every div will need a logo).

Like this:

This is the intended end result:

I should add, the JSFiddle linked to has one large CSS file in there, when I've actually got three separate files - one for the layout, one for basics, and one for webfonts. For JSFiddle, I had to condense it into one CSS file there; the original file has CSS links in the header.

I would really appreciate any advice or guidance on making this look better.

Answer 1

.card-info
{....}
.card-price 
{
padding: 1rem;
font-size: 0.9rem;
}

In Your CSS Change the padding of card-price from 2rem to 1rem

check the space in the image

Answer 2

Try using overflow: hidden in.layout{}. Also use "white-space: nowrap" in unordered list.It will not wrap your content on next line.For example:

.layout{
   //rest of the styling here ....
   overflow: hidden;
  }
 .ul{
 //rest of the styling here ....
white-space: nowrap
}