How do I align two divs next to each other?

Question

I am trying to align two divs next to each other. The left div has four small images on top of each other, and the right div has one large image the size of the left div. I've been trying to use block and inline-block as well as relative positioning for them, but I don't understand why they are not aligning next to each other. I got a temporary solution using absolute positions but I know it's not really something functional. Here is my code:

HTML

<div class="container product-container">
    <!--Product Information-->
    <div class="row row-sm">
        <!--Product Images-->
        <div class="col-md-6 product-image-container">
          <!--Side Images-->
          <div class="side-picture-container">
            <ul class="picture-list">
              <li><img src="https://s.fotorama.io/1.jpg"></li>
              <li><img src="https://s.fotorama.io/2.jpg"></li>
              <li><img src="https://s.fotorama.io/3.jpg"></li>
              <li><img src="https://ucarecdn.com/382a5139-6712-4418-b25e-cc8ba69ab07f/-/stretch/off/-/resize/760x/"></li>
            </ul>
          </div>
          <!--Current Product Image-->
          <div class="big-product-image">
            <img class="current-product-image" src="https://s.fotorama.io/1.jpg">
          </div>
        </div>
        
        <!--Product Text-->
        <div class="col-md-6">

        </div>
    </div>
</div>

CSS

.product-container
{
    margin-top: 4vw;
    display: block;
}

.product-image-container
{
    display: inline-block;
}

.picture-list li
{
    display: inline-block;
    width: 110px;
    height: 114px;
    border: none;
}

.picture-list li img
{
    width: 97%;
    height: auto;
}

.product-image-container .side-picture-container
{
    width: 90px;
    display: inline-block;
    vertical-align: top;
    margin-top: 0px;
    position: relative;
}

.picture-list li img
{
    height: 100px;
    object-fit: cover;
    border-radius: 10%;
}

/* .big-product-image
{
    position: relative;
} */

.current-product-image
{
    position: absolute;
    height: 450px;
    width: 350px;
    margin-top: 0.25vw;
    border-radius: 10%;
    top: 27.75%;
    left: 20%;
}

What do I need to do to get 'side-picture-container' and 'big-product-image' next to each other?

Answer 1

Well, there's a lot of CSS that didn't need to be there. The biggest problem, once the absolute positioning was removed, was a combination of using "col" instead of "row" for a class on the "product-image-container" and having both "product-image-container" & "side-picture-container" using the same class definition with the "width: 90px;".

Once I made those changes, what you had worked.

.product-container
{
    margin-top: 4vw;
}

.product-image-container
{
    display: flex;
}

.picture-list li
{
    width: 110px;
    height: 114px;
    border: none;
}

.picture-list li img
{
    width: 97%;
    height: auto;
}

.product-image-container .side-picture-container
{
    vertical-align: top;
    margin-top: 0px;
}

.picture-list li img
{
    height: 100px;
    border-radius: 10%;
}

.current-product-image
{
    height: 450px;
    width: 350px;
    margin-top: 0.25vw;
    border-radius: 10%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container product-container">
    <!--Product Information-->
    <div class="row-md-6">
        <!--Product Images-->
        <div class="row-md-6 product-image-container">
          <!--Side Images-->
          <div class="col-md-6 side-picture-container">
            <ul class="picture-list">
              <li><img src="https://s.fotorama.io/1.jpg"></li>
              <li><img src="https://s.fotorama.io/2.jpg"></li>
              <li><img src="https://s.fotorama.io/3.jpg"></li>
              <li><img src="https://ucarecdn.com/382a5139-6712-4418-b25e-cc8ba69ab07f/-/stretch/off/-/resize/760x/"></li>
            </ul>
          </div>
          <!--Current Product Image-->
          <div class="big-product-image">
            <img class="current-product-image" src="https://s.fotorama.io/1.jpg">
          </div>
        </div>
        
        <!--Product Text-->
        <div class="col-md-6">

        </div>
    </div>
</div>