Placing <span> element and fontawesome icon in same line

I have a problem placing elements in one line.

<div class="container">
  <ul id="suggestion_list"> 
    <li class="mp_search_suggest_element">
        <span >
            <b>some bold text</b> here 
            <i class="fa fa-bed fa-fw" aria-hidden="true"></i>
        </span>
    </li>
    <li class="mp_search_suggest_element">
        <span >
            <b>some bold text</b> some long text here
            <i class="fa fa-bed fa-fw" aria-hidden="true"></i>
        </span>
    </li>
  </ul>
</div>

I load the ul dynamically via ajax in the container div. I'd like to have the text aligned to the left, the icon to the right, in one line. So the line stretches the container div to fit in and never displays the text or the icon in two lines.

The css:

.container {
   display: inline-block;
   position: absolute;
   width: auto;
   min-width: 350px;
   max-width: 600px;
   padding: 10px 0;
 }

 ul{
   list-style-type: none;
 }

 li{
   width: 100%;
   white-space: nowrap ;
 }

So this is what I have so far.



Read more here: https://stackoverflow.com/questions/41287048/placing-span-element-and-fontawesome-icon-in-same-line

Content Attribution

This content was originally published by Szekelygobe at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: