Place icons on right end of accordion

Question

I've made the following collapsible accordion with the use of Materialize css framework.

I'm trying to place the chevron icons at the end of collapsible header. I have applied css class right to make icon float to the right end of the collapsible header but this doesn't make it go complete right end of the collapsible header.

What would be the best measure to move the chevron icon to the right end position of collapsible header.

 $('.collapsible').collapsible();

.collapsible li.active i {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <ul class="collapsible">
    <li>
      <div class="collapsible-header">
      
      First
      <i class="material-icons rotate right">expand_more</i></div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Second
      <i class="material-icons rotate right">expand_more</i>
      </div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Third
      <i class="material-icons rotate right">expand_more</i></div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

Answer 1

As your div.collapsible-header already has display:flex, you can add justify-content: space-between. This will make...

the first item is flush with the main-start edge, and the last item is flush with the main-end edge.

justify-content

$('.collapsible').collapsible();

.collapsible li.active i {
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.collapsible-header {
  justify-content: space-between;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<ul class="collapsible">
  <li>
    <div class="collapsible-header">

      First
      <i class="material-icons rotate right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header">Second
      <i class="material-icons rotate right">expand_more</i>
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header">Third
      <i class="material-icons rotate right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>