Moved row to column CSS

Issue

I'm new to programming so can anyone tell me how can I moved this box next to another box? i want to make 3 column, here's some illustration hopefully helpful

this is my demo:

.product__sidebar__view__item {
  height: 190px;
  position: relative;
  border-radius: 15px;
  margin-bottom: 20px; //i've change all of this but seems doesn't work
}

.product__sidebar__view__item h5 {
  position: absolute;
  left: 0;
  bottom: 25px;
  width: 100%;
  padding: 0 30px 0 20px;
}

.product__sidebar__view__item h5 a {
  color: #ffffff;
  font-weight: 700;
  line-height: 26px;
}

<section class="product spad">
        <div class="container">
            <div class="row">

                <div class="col-lg-4 col-md-8 col-sm-8">
                    <div class="sidebar_product">
                        <div class="product__sidebar__view">
                            <div class="section-title">
                                <h5>Main Menu</h5>
                            </div>
                            <div class="column">
                                <div class = "product__sidebar__view__item set-bg mix month week" data-setbg="/assets/2.jpg">
                                    <h5><a href="/billing">Survey</a></h5> 
                                </div>
                                 <div class="product__sidebar__view__item set-bg mix month week" data-setbg="/assets/1.jpg">
                                    <h5><a href="#">Actor Mapping</a></h5>
                                </div>
                                 <div class="product__sidebar__view__item set-bg mix week years" data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Political Text Analysis</a></h5>
                                </div>
                                <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Social Media Network Analysis</a></h5>
                                </div>
                                <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/3.jpg">
                                    <h5><a href="#">Media Monitoring</a></h5>
                                </div>
                            </div>  
                        </div>        
                    </div>
                </div>
        </div>
    </div>

Anyone knows how to do it? Thank you everyone!

Solution

Do you mean like this?

.product__sidebar__view__item {
  height: 190px;
  position: relative;
  border-radius: 15px;
  margin-bottom: 20px; //i've change all of this but seems doesn't work
}

.product__sidebar__view__item h5 {
  bottom: 25px;
  width: 100%;
  padding: 0 30px 0 20px;
}

.product__sidebar__view__item h5 a {
  color: red;
  font-weight: 700;
  line-height: 26px;
}

.column {
  display: grid; 
  justify-content: space-evenly;
  grid-template-columns: auto auto auto;
  }

<section class="product spad">
        <div class="container">
            <div class="row">

                <div class="col-lg-4 col-md-8 col-sm-8">
                    <div class="sidebar_product">
                        <div class="product__sidebar__view">
                            <div class="section-title">
                                <h5>Main Menu</h5>
                            </div>
                            <div class="column">
                                <div class = "product__sidebar__view__item set-bg mix month week" data-setbg="/assets/2.jpg">
                                    <h5><a href="/billing">Survey</a></h5> 
                                </div>
                                 <div class="product__sidebar__view__item set-bg mix month week" data-setbg="/assets/1.jpg">
                                    <h5><a href="#">Actor Mapping</a></h5>
                                </div>
                                 <div class="product__sidebar__view__item set-bg mix week years" data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Political Text Analysis</a></h5>
                                </div>
                                <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Social Media Network Analysis</a></h5>
                                </div>
                                <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/3.jpg">
                                    <h5><a href="#">Media Monitoring</a></h5>
                                </div>
                            </div>  
                        </div>        
                    </div>
                </div>
        </div>
    </div>

Answered By - Crystal