making two containers in a row-CodePudding

May I ask how to fix this? I need the second container to be at the bottom of the first container, and I do not know how to solve it. I have used display: flex but it seems it does not feel right and applicable in two containers, that is why I am having a trouble on how to fix it:

https://jsfiddle.net/0nv2oLqy/1/

.content {
  display: flex;
}

aside {
  border-right: 1px solid #000000;
}

aside {
  height: 100vh;
  width: 350px;
}

aside ul {
  padding-top: 5%;
  list-style-type: none;
  text-align: center;
}

aside a {
  text-decoration: none;
  display: block;
  font-size: 23px;
  color: black;
  margin: 40px;
  font-family: $font1;
  font-weight: lighter;
}

aside a:hover {
  color: $color1;
}

.first {
  margin: 50px;
}

.first a {
  background-color: #ebe0dd;
  padding: 4px;
}

.line {
  padding: 8px;
  border-bottom: 1px solid $color5;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<div >
  <aside >
    <ul>
      <li ><a href="#">All</a></li>
      <li><a href="#">To Pay</a></li>
      <li><a href="#">To Ship</a></li>
      <li><a href="#">To Receive</a></li>
      <li><a href="#">Completed</a></li>
      <li><a href="#">Cancelled</a></li>
    </ul>
  </aside>



  <div  height="20">
    <div >
      <div >
        <img src="/images/charrr.png" alt="" width="50">
      </div>

      <div >
        <h5>Charlotte Folk</h5>
      </div>

      <div >
        <h6>To Pay</h6>
      </div>
    </div>

    <div >
      <div >
        <img src="/images/charlottewhite.jpg" alt="" width="80">
      </div>

      <div >
        <h6>CFXXI Sweater</h6>
        <h6>Large</h6>
        <h6>x1</h6>
      </div>

      <div >
        <h6>P990</h6>
      </div>
    </div>

    <div >
      <div ><a href="#">Contact Seller</a></div>
    </div>

  </div>


  <div  height="20">
    <div >
      <div >
        <img src="/images/charrr.png" alt="" width="50">
      </div>

      <div >
        <h5>Charlotte Folk</h5>
      </div>

      <div >
        <h6>To Pay</h6>
      </div>
    </div>

    <div >
      <div >
        <img src="/images/charlottewhite.jpg" alt="" width="80">
      </div>

      <div >
        <h6>CFXXI Sweater</h6>
        <h6>Large</h6>
        <h6>x1</h6>
      </div>

      <div >
        <h6>P990</h6>
      </div>
    </div>

    <div >
      <div ><a href="#">Contact Seller</a></div>
    </div>

  </div>

</div>

CodePudding user response：

Just wrap them inside a new div

.content {
  display:flex;
}

aside {
border-right: 1px solid #000000;
}

aside {
 height: 100vh;
 width: 350px;
}

aside ul {
 padding-top: 5%;
 list-style-type: none;
 text-align: center;
}

aside a {
 text-decoration: none;
 display: block;
 font-size: 23px;
 color: black;
 margin: 40px;
 font-family: $font1;
 font-weight: lighter;
}

aside a:hover {
 color: $color1;
}

.first {
  margin: 50px;
}
.first a {
  background-color: #ebe0dd;
  padding: 4px;
}

.line {
  padding: 8px;
  border-bottom: 1px solid $color5;
}

.rightDiv {
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--Link for Font awesome icons-->  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

    <link rel="stylesheet" href="/styles/try.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

</head>
<body>

  <div class = "content">
    <aside class = "d-none d-md-block">
      <ul>
        <li class = "first"><a href="#">All</a></li>
        <li><a href="#">To Pay</a></li>
        <li><a href="#">To Ship</a></li>
        <li><a href="#">To Receive</a></li>
        <li><a href="#">Completed</a></li>
        <li><a href="#">Cancelled</a></li>
      </ul>
    </aside>
    
    
  <div class='rightDiv'>
    <div  height = "20">
      <div >
        <div >
          <img src="/images/charrr.png" alt="" width="50">
        </div>
  
        <div >
          <h5>Charlotte Folk</h5>
        </div>
  
        <div >
          <h6>To Pay</h6>
        </div>
      </div>
  
      <div >
        <div >
          <img src="/images/charlottewhite.jpg" alt="" width="80">
        </div>
  
        <div >
          <h6>CFXXI Sweater</h6>
          <h6>Large</h6>
          <h6>x1</h6>
        </div>
  
        <div >
          <h6>P990</h6>
        </div>
      </div>
  
      <div >
        <div ><a href="#">Contact Seller</a></div>
      </div>
      
    </div>
  
    
  <div  height = "20">
    <div >
      <div >
        <img src="/images/charrr.png" alt="" width="50">
      </div>

      <div >
        <h5>Charlotte Folk</h5>
      </div>

      <div >
        <h6>To Pay</h6>
      </div>
    </div>

    <div >
      <div >
        <img src="/images/charlottewhite.jpg" alt="" width="80">
      </div>

      <div >
        <h6>CFXXI Sweater</h6>
        <h6>Large</h6>
        <h6>x1</h6>
      </div>

      <div >
        <h6>P990</h6>
      </div>
    </div>

    <div >
      <div ><a href="#">Contact Seller</a></div>
    </div>
    
  </div>
  </div>
  
  </div>





  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>

CodePudding user response：

keep that .content {display: flex} but try to add a new container for that two price column or that two container you mentioned in question and then add this ruleset .your-class { display:flex; flex-direction: column; }