How to make a container row?

Question

I'm fairly new to HTML and still learning, but I'm struggling with connecting rows and divs.

I'm trying to make something like this (picture below). I want to be able to make it clickable and go to a certain link. They both have to be next to each other, but with each their own link. I know float is the right option but can I use grid too?

How do I do this?

Any help is very much appreciated, thank you!

Answer 1

HTML

<div class="container">
        <div class="product">
            <div class="bg-white">
                <a href="">
                    <img class="img-fluid"
                        src="https://static.wixstatic.com/media/2c0034_5e484cb9921c41a8bde8eed74b3aa810~mv2.jpg"
                        alt="" /></a>
                <h1>Demo Heading</h1>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div class="product">
            <div class="bg-white">
                <a href="">
                    <img class="img-fluid"
                        src="https://static.wixstatic.com/media/2c0034_84e67efc3df44e8ea8b6da006e6d1ba5~mv2.jpg"
                        alt="" /></a>
                <h1>Demo Heading</h1>
                <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor
                    sit amet.Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

CSS

<style>
       * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .img-fluid {
        max-width: 100%;
        width: 100%;
        display: block;
        height: auto;
    }

    .container {
        margin: auto;
        max-width: 1200px;
        display: flex;
        flex-wrap: wrap;
        background-color: #f6f6f6;
        padding: 1rem;
    }

    .container .product {
        flex: 0 0 50%;
        padding: 0 1rem;
    }

    .container .product .bg-white {
        background-color: white;
        box-shadow: 0px 0px 15px 5px #ddd;
        height: 100%;
    }

    .container .product h1 {
        font-size: 1rem;
        padding: 0.5rem 1rem .1rem 0;
        border-bottom: 2px solid brown;
        display: inline-block;
        margin: 0 0 .5rem .5rem;
        text-transform: uppercase;
    }

    .container .product p {
        font-size: 1rem;
        padding: 0 1rem 0.5rem 0.5rem
    }
    </style>