Pull icon to right & inline with text?

Question

Having a bit of a hard time pulling an icon to the right. I'd like it to be to the right and not fall off the line with the text.

Where am I going wrong?

.featuresCard{
width: 80vw;
padding: 12px;
margin-bottom: 15px!important;
color: white;
background-color: #e74c3c!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>



<div id='results1' class="card results1 resultsList featuresCard" >Item 1 <i class="pull-right fa fa-check"></i> </div>

<div id='results2' class="card results2 resultsList featuresCard"> Item 2 <i class="pull-right fa fa-check"></i></div>

<div id='results3' class="card results3 resultsList featuresCard"> Item 3 <i class="pull-right fa fa-check"></i></div>

Do you want to place the icon on the far right of the <div> or to the right of the 'Item' word? — Manuel Abascal
– Manuel Abascal, Commented Oct 3, 2019 at 18:30

Natixco · Accepted Answer · 2019-10-03 18:35:14Z

2

I would suggest you to look into flexbox, pretty cool stuff. If you want the text and icon to be next to each other, just remove the justify-content.

Check it out here: https://jsfiddle.net/xwh59uy6/1/

display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;

answered Oct 3, 2019 at 18:35

Natixco

6596 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pull icon to right & inline with text?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related