How do I put icon and text paragraph in one line?

Question

I want to put my font awesome icon and text paragraph into one line. How can I fix this code?

<div class="date" style="display: inline-block;">
       <i class="fa fa-user-o" aria-hidden="true" style="float: left;"></i>
       <p style="display: inline-block; text-align: right;float: left;" >10/01/2018</p>
     </div>
                           

Solution

Julia, remove all your floats:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="date">
       <i class="fa fa-user-o" aria-hidden="true"></i>
       <p style="display: inline-block" >10/01/2018</p>
</div>

Also you might make it this way:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="date">
       <i class="fa fa-user-o"> 10/01/2018</i>
</div>

Comments

[Юлия Твердохлеб]

Works. Thank you!

[Kosh]

Happy to help !

[MadeInDreams]

@KoshVery I see sorry. But i think it still missleading to have bootstrap mentionned in the first line of your code when it isnt really required here.