css - How can I right align a text wrapped sentence next to an icon?

Question

I am trying align a long string (text wrapped) to the right of an icon.

Here is my CSS:

  :root {
    font-family: Montserrat, sans-serif;
    text-transform: none;

    .icon-button-size {
      width: 50px;
      height: 50px;
      vertical-align: middle;
    }
  }

and here is my HTML:

  <ion-card>
      <ion-list>
        <div>
          <span class="icon-button-frame">
              <ion-icon class="icon-button-size" color="primary" [name]="lr.likelyRank === selectedLikely?'checkmark-circle':'stop-circle'"></ion-icon>
              {{lr.likelyName}}
          </span>
          <ul>
            <li *ngFor="let likely of lr.likelyCriteria">{{likely}}</li>
          </ul>
        </div>
      </ion-list>
  </ion-card>

and below is the actual screenshot.

question from:https://stackoverflow.com/questions/65947718/how-can-i-right-align-a-text-wrapped-sentence-next-to-an-icon

Answer 1

Change this code like this,

<span class="icon-button-frame">
     <ion-icon class="icon-button-size" color="primary" [name]="lr.likelyRank === selectedLikely?'checkmark-circle':'stop-circle'"></ion-icon>
      <span class="likely-name">{{lr.likelyName}}</span>
</span>

As the above code, instead of outputting the likelyName next to the ion-icon, wrap it with the span tag so you can easily write css for the span to set width and text-align to make icon and text seperate.

If you set width for icon(for example: icon size 30*30) and set the below css for "likely-name" span tag

display: inline-block (or you can use)
float: left
min-width: 160px    // if you like to set minimum width.

this will ensure both icon and text element is separate so the text is wrap below the first line of text starts.

check this demo url of codepen https://codepen.io/Santhanakrishnan/pen/jOVOWEg