问使用css Flexbox并排显示行框和列框

EN

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

body{
   background-color: #f3f5f9;
}

.wrapper{
  display: flex;
  position: relative;
}

.wrapper .sidebar{
  width: 200px;
  height: 100%;
  background: #091e42;
  padding: 30px 0px;
  position: fixed;
}

.wrapper .sidebar h2{
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}

.wrapper .sidebar ul li{
  padding: 15px;
  border-bottom: 1px solid #bdb8d7;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(255,255,255,0.05);
}    

.wrapper .sidebar ul li a{
  color: #bdb8d7;
  display: block;
}

.wrapper .sidebar ul li a .fas{
  width: 25px;
}

.wrapper .sidebar ul li:hover{
  background-color: #36b37e;
}
    
.wrapper .sidebar ul li:hover a{
  color: #fff;
}
 
.wrapper .sidebar .social_media{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.wrapper .sidebar .social_media a{
  display: block;
  width: 40px;
  background: #36b37e;
  height: 40px;
  line-height: 45px;
  text-align: center;
  margin: 0 5px;
  color: #bdb8d7;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.wrapper .main_content{
  width: 100%;
  margin-left: 200px;
}

.wrapper .main_content .header{
  padding: 20px;
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
}

.header{
  padding: 20px;
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 2%;
  margin-right: 2%;
}

.filters{
  width: 18%;
  height: 88%;
  background-color: #ffab00;
  display: flex;
  flex-wrap: wrap;
  margin-left: 1%;
  margin-top: 1%;
  border-radius: 10px;
}

.cardActions{
  margin-left: 2%;
}

.wrapper .main_content .info{
  margin: 20px;
  color: #717171;
  line-height: 25px;
}

.wrapper .main_content .info div{
  margin-bottom: 20px;
}

@media (max-height: 500px){
  .social_media{
    display: none !important;
  }
}

.topIcons{
  margin-right: 2%;
}

.container {
  margin: 0 auto;
  display: flex;
}

.column {
  flex-direction: column;
  height: fit-content;
  width: 100%; 
  justify-content: flex-start;
 
}

input[type="radio"]{
  margin-left: 4%;
  margin-bottom: 5%;  

}

input[type="checkbox"]{
  margin-left: 4%;
  margin-bottom: 5%;  
}

hr.solid {
  border-top: 1px solid white;
  margin-left: 4%;
  margin-right: 4%;
}

/* Products */
.atul {
        display: flex;
    }
    .rightSide {
        display: flex;
        flex-direction: column;
        padding: 10px;
        border: 1px solid red;
        border-radius: 4px;
        width: 80%;
        margin-left: 1%;
    }
    .subSection{
        min-height: 50px;
        height: 100%;
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid red;
        border-radius: 4px;
    }
.products{
  width: 78%;
  height: 13%;
  background-color: #091e42;
  flex-direction: row;
  display: block;
  margin-left: 50%;
}

/* Rating */

/*
    Ratings Stars
    (with as little code as possible)
*/
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
  color: white;
  font-size: x-large;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color: gold;
}

<div class="cardActions">
    <h2 style="display:inline">Card Actions | <i class="fas fa-home"></i> </h2> >> eCommerce >> Eletronics
</div>
<section class="atul">
<div class="filters">
    <div class="container column">
        <p style="margin-top: 8%; margin-bottom: 5%; margin-left: 4% ;font-weight: bold;"> Multi Range
        </p>
        <div class="checkBoxes">
            <input type="radio" name="multiRange" style="display: inline;" id="radio1">
            <label for="radio1">$10</label> <br>
            <input type="radio" name="multiRange" id="radio2">
            <label for="radio2">$10-$100</label> <br>
            <input type="radio" name="multiRange" id="radio3">
            <label for="radio3">$100-$500</label> <br>
            <input type="radio" name="multiRange" id="radio4">
            <label for="radio4">$500</label> <br>
            <input type="radio" name="multiRange" id="radio5">
            <label for="radio5">All</label>
        </div>
        <p style="font-weight: bold; margin-top: 10%; margin-left: 4%">
            Slider<input type="text" id="amount" readonly style="border:0; font-weight:bold; background-color: #ffab00; margin-left: 35%;">
        </p>
        <div style="background-color: #091e42; width: 80%; margin-left: 5%; margin-right: 5%; margin-top: 10%; margin-bottom: 10%;" id="slider-range"></div>
        <hr class="solid">
        <p style="margin-top: 10%; margin-left: 4% ; margin-bottom: 10%; font-weight: bold;"> Category
        </p>
        <div class="checkBoxes">
            <input type="checkbox" id="check1"> <label for="check1">Teste</label> <br>
            <input type="checkbox" id="check2"> <label for="check2">Teste</label> <br>
            <input type="checkbox" id="check3"> <label for="check3">Teste</label> <br>
            <input type="checkbox" id="check4"> <label for="check4">Teste</label> <br>
            <input type="checkbox" id="check5"> <label for="check5">Teste</label> <br>
            <input type="checkbox" id="check6"> <label for="check6">Teste</label> <br>
            <input type="checkbox" id="check7"> <label for="check7">Teste</label> <br>
            <input type="checkbox" id="check8"> <label for="check8">Teste</label> <br>
            <input type="checkbox" id="check9"> <label for="check9">Teste</label> <br>
            <input type="checkbox" id="check10"> <label for="check10">Teste</label>
        </div>
        <hr class="solid">
        <p style="margin-top: 10%; margin-bottom: 10%; margin-left: 4%; font-weight: bold;">
            Brand
        </p>
        <div class="checkBoxes">
            <input type="checkbox" id="check1"> <label for="check1">Teste</label> <br>
            <input type="checkbox" id="check2"> <label for="check2">Teste</label> <br>
            <input type="checkbox" id="check3"> <label for="check3">Teste</label> <br>
            <input type="checkbox" id="check4"> <label for="check4">Teste</label> <br>
            <input type="checkbox" id="check5"> <label for="check5">Teste</label> <br>
            <input type="checkbox" id="check6"> <label for="check6">Teste</label> <br>
            <input type="checkbox" id="check7"> <label for="check7">Teste</label> <br>
            <input type="checkbox" id="check8"> <label for="check8">Teste</label> <br>
            <input type="checkbox" id="check9"> <label for="check9">Teste</label> <br>
            <input type="checkbox" id="check10"> <label for="check10">Teste</label>
        </div>
        <hr class="solid">
        <p style="margin-top: 10%; margin-bottom: 10%; margin-left: 4%; font-weight: bold;">
            Rating
        </p>
        <div class="rating">
            <span style="color: white;">☆</span>
            <span>☆</span>
            <span>☆</span>
            <span>☆</span>
            <span>☆</span>
        </div>
        <div class="rating">
            <span style="color: white;">☆</span>
            <span>☆</span>
            <span>☆</span>
            <span>☆</span>
            <span>☆</span>
        </div>
        <div class="rating">
            <span style="color: white;">☆</span>
            <span>☆</span>
            <span>☆</span>
            <span>☆</span>
            <span>☆</span>
        </div>
    </div>
</div>

<div class="rightSide">
    <div class="subSection"></div>
    <div class="subSection"></div>
    <div class="subSection"></div>
    <div class="subSection"></div>
</div>
    
</section>

<div id='listpage'> //here it should be flex-direction:column
 <div class='list'>
    <div></div>
    <div></div>
    <div></div>
 </div>
 <div class='list'>
    <div></div>
    <div></div>
    <div></div>
 </div>
</div>