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!!

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;
  }

CodePudding user response：

Taking a look at this it seems that if you add justify-content-between class to .question-title element should get you what you need. I'd advise you to also add flex-shrink-0 (or the equivalent class) to the button too to prevent it from shrinking (but the text will).

---

Some other tips

• It might help to know from the beginning that you're using Bootstrap or some other framework since that snippet you posted doesn't really work without those other classes being present.
• You have double semicolons in some of the CSS. You should consider removing that.

CodePudding user response：

This might also work

Bootstrap 4

<span class="minus-icon float-right">
<i class="far fa-minus-square"></i>
</span>

Bootstrap 5

<span class="minus-icon float-end">
<i class="far fa-minus-square"></i>
</span>

Or even trying float-right or float-end directly in the icon class.

CodePudding user response：

I mostly use space-between.

.container {
  padding: 0.5rem;
}
.container .item {
  padding: 0.25rem;
  border: 1px solid lightblue;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .item .action-btn {
  font-weight: bold;
  margin: 0 0.25rem;
  cursor: pointer;
}

<div class="container">
  <div class="item">
    <span>My text goes here</span>
    <span class="action-btn"> </span>
  </div>
    <div class="item">
    <span>My text goes here, yet more text</span>
    <span class="action-btn"> </span>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to add two CSS.

.question-title{
    display:flex;
  }
.question-title p {
    width:100%;
  }

CodePudding user response：

you can use flex-boxes like blow:

.question-title{
    display: flex;
    justify-content: space-between;
 }

Note : it's better to give another div to button instead of making the button child of title.

alternatively , you can use relative positioning to button

.question-button{
   position: relative;
   right: 0.5rem;
 }