I am trying to push the [+] icon towards the right, irrespective of the text length, but I am unable to do.

I tried doing 'text-align: right; and justify-content-right' also 'float:right' but it does not work.

Below is the image and the html and css for the required section. How should I get it to align right? Thank you!!

[![enter image description here](https://i.stack.imgur.com/VK9Wj.png)](https://i.stack.imgur.com/VK9Wj.png)

this is the Html

```
<div class="container  h-100 d-flex justify-content-center align-items-center ">
 <div class="info_box">
     <div class="info_title">
       <span>Some Rules of this Quiz</span>
     </div>
   <!--Questions-->

   <!--single questions-->
<article class="question">
<div class="question-title d-flex">
<p>Is it Multiple Choice?</p>
<button type="button" class="question-btn justify-content-right">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>  
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<!--question text -->
<div class="question-text">
<p>
No, There is only one correct answer per question. Once selected you cannot reselect 
</p>
</div>
</article>

 <div class="info_buttons">
      <button class="restart">Continue to Quiz</button>
      <button class="quit">Exit Quiz</button>
</div>
</div>
</div>

```

css

```
.info_box{
    width:540px;
    padding: 15px;;
    background: var(--clr-white);
    border-radius: 5px;;
}

.info_title{
    padding: 5px;
    border-bottom: 1px solid black;
    color:var(--clr-steelBlue);
    margin-bottom: 10px;
    text-align: center;
}
.question{
   border: 2px solid red;
}
 .question-text p {
    margin-bottom: 0;
  }
.question-title p {
    margin-bottom: 0;
    letter-spacing: var(--spacing);
    color: var(--clr-grey);
  }
  .question-btn {
    font-size: 1.5rem;
    background: transparent;
    border-color: transparent;
    cursor: pointer;
    color: var(--clr-steelBlue);
    transition: var(--transition);
  }

  .question-btn:hover {
    transform: rotate(90deg);
  }

  .question-text p{
      color: var(--clr-grey-6);
  }

  /*Hide Text*/
  .question-text{
    display: none;
  }

  .show-text .question-text{
      display:block;
  }
  .minus-icon{
      display: none;
  }

  .show-text .minus-icon{
      display: block;
  }

  .show-text .plus-icon{
      display: none;
  }

  .info_buttons {
      float: right;
      padding: 5px;
      margin-top: 5px;
  }

```