Bootstrap inline button dropdown within <p> jumbotron

Question

Currently I have a jumbotron setup with some paragraph text, and I would like to stick a button dropdown inline with the text.

Dropdown button

<span class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Button... <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Opt 1</a></li>
    <li><a href="#">Opt 2</a></li>
  </ul>
</span>

Jumbotron

<div class="jumbotron">
  <h1>Hello!</h1>
  <p>Welcome</p>
  <p>Another paragraph
   <!-- dropdown is here -->
  </p>
</div> <!-- jumbotron -->

If the dropdown is within the <p> tag, it does not "dropdown" (but renders). If it is outside of the <p> tag it functions fine, but I would like it to be inline with the text and need the text to be in the <p> tag to get the style. Any ideas?

Things to note -- If I replace the <span> tags with <div> tags, it will work fine within the <p> tags, but won't be inline.

---

Solution

Added class="pull-left" on the <p> tag to get it inline (from Esotericist's answer)

<div class="jumbotron">
  <h1>Hello!</h1>
  <p>Welcome</p>
  <p class="pull-left">Another paragraph</p>
   <!-- dropdown is here -->

</div> <!-- jumbotron -->

Solution

If you want it inline then you need to use pull-left and pull-right, see here for an example:

http://www.bootply.com/T2wgdlzhZf

Is it what you are looking for?