How to align svg icon on the right side of the button?-CodePudding

Here is my button.

How to make the SVG icon on the right side of the button, but the "Retry" keeps on the left?

Here is my code

.errorButtonRetry {
  position: absolute;
  height: 31px;
  left: 61px;
  top: 262px;
  width: 210px;
  background: blue;
  border-radius: 2px;
  border: none;
  text-align: left;
  padding-left: 12px;
  display: flex;
  padding-top: 6px;
  cursor: pointer;
}

.button__text {
  color: #FFFFFF;
  font-family: Source Code Pro;
  font-weight: 500;
  font-size: 13px;
  padding-top: 1px;
}

<button class='errorButtonRetry'>
    <span class='button__text'>Retry</span>

        <div  style="width: 18px; height: auto;">
        <!-- svg is the circle-cross icon -->
        <svg viewbox="0 0 512 512">
                <path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 176v160M336 256H176"/>
        </svg></div>

</button>

I want the text "Retry" on the left and SVG icon on the right side.

CodePudding user response：

You can use CSS flexbox properties justify-content: space-between; on errorButtonRetry class.

Like that :

.errorButtonRetry {
  position: absolute;
  height: 31px;
  left: 61px;
  top: 262px;
  width: 210px;

  background: blue;
  border-radius: 2px;
  border: none;
  padding-left: 12px;
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  cursor: pointer;
}


 .button__text {
  color: #FFFFFF;
  font-family: Source Code Pro;
  font-weight: 500;
  font-size: 13px;
  padding-top:1px;
}

<button class='errorButtonRetry'>

  <span class='button__text'>Retry</span>
  <div  style="width: 18px; height: auto;">
    <!-- svg is the circle-cross icon -->
    <svg viewbox="0 0 512 512">
      <path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width="32" />
      <path fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 176v160M336 256H176" />
    </svg>
  </div>
</button>