How to align div left and right properly in css

Issue

I am trying to align div left and right properly but it is not working properly.I am expecting what is their in the image below. How to achieve this.

.main {
  display: flex;
  width: 100%;
}

.div1 {
  float: left;
}

.div2 {
  float: left;
}

.div3 ul>li {
  display: inline-block;
}

li:first-child {
  border-right: 1px solid #ccc;
}

.btns {
  display: flex;
}

.div4 {
  float: right;
}

<div class="main">
  <div class="div1">
    Heading Heading Heading
  </div>

  <div class="div2">

    <div class="div3">
      <ul>
        <li> car </li>
        <li> bus </li>
      </ul>
      <div class="btns">
        <button>One</button>
        <button>Two</button>
      </div>
    </div>
    <div class="div4">
      <div class="btns">
        <button>One</button>
        <button>Two</button>
      </div>
    </div>

  </div>

</div>

Expecting like below: Demo: https://stackblitz.com/edit/angular-checkbox-custom-value-nithd8?file=src%2Fapp%2Fapp.component.html

Solution

Try this:

.main {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.div2,
.div3,
.div4 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.div3 ul > li {
  display: inline-block;
}
li:first-child {
  border-right: 1px solid #ccc;
}
.btns {
  display: inline-block;
}

Just in case, if you want, you can practice the flexbox here

Answered By - rna