How do i align text to right with space-between flex box

Question

This is my HTML:

.skillbox {
  display: flex;
  justify-content: space-between;
  width: 65%;
  margin: auto;
  align-items: center;
}

.skilltitle {
  align-content: flex-end;
  margin-top: auto;
  margin-bottom: auto;
  padding-right: 20px;
  padding-left: auto;
}

<div class='skillbox'>
  <div class="skilltitle">
    <h1 class='skillmtext'>My skills</h1>
  </div>
  <div class='coul'>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
  </div>
</div>

I want the "My skills" to be on the right, I have tried multiple things but still can't figure out using flex-box property to margin: auto; still, nothing seems to be working here please suggest.

Answer 1

Set a flex-grow propery and a text-align on .skilltitle, like this:

.skilltitle {
  flex: 1 0 auto;
  align-content: flex-end;
  margin-top: auto;
  margin-bottom: auto;
  padding-right: 20px;
  padding-left: auto;
  text-align: end;
}