Cant figure out how to make left and right block in footer

Question

I need the left block to the left side of my footer and the right block to the right side of my footer. But for some reason both are underneath. Any help would be appreciated!

I tried a few things but didnt work and chatgpt wont give me the proper solution.

Below I inserted html and css, maybe someone could help me with this, would be nice.

.mastfoot .inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.mastfoot .inner>div {
  width: 25%;
}

.mastfoot .inner>div>a {
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.mastfoot .inner>div>a {
  display: block;
}

.mastfoot .inner>div {
  padding: 10px;
}

.d-flex {
  display: flex;
  flex-direction: column;
}

.btnfooter {
  display: block;
  margin-bottom: 5px;
}

.left-block {
  justify-content: flex-start;
}

.right-block {
  justify-content: flex-end;
}

<footer class="mastfoot mt-auto">
  <div class="inner d-flex justify-content-between">
    <div class="d-flex left-block">
      <div>
        <h4>Left Block</h4>
      </div>
      <div>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
      </div>
    </div>
  </div>
  <div class="inner d-flex justify-content-between">
    <div class="d-flex right-block">
      <div>
        <h4>Right Block</h4>
      </div>
      <div>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
      </div>
    </div>
  </div>
</footer>