Consider this HTML:

<div id="container">
  <div id="actions">
    <a href="#">Click me!</a>
  </div>
  <div id="content">
    Hello Universe! Hello Universe! Hello Universe! Hello Universe! Hello Universe! Hello Universe!
  </div>
</div>

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

Read more Show archive.org snapshot

If you want the actions element to float on the left, you'd just say this in your CSS:

#actions { float: left; }

Unfortunately, any content of the content's text will wrap underneath it:

If you don't want that but actually wish for longer text to stay on the same vertical boundaries, use overflow: hidden on the element whose content you don't want to see wrapping:

#actions { float: left; }
#content { overflow: hidden; }

Now it's pretty:

The reason behind this is that "overflow: hidden" will give you a new block formatting context. You could use other attributes Show archive.org snapshot as well, but overflow: hidden works nicely without interfering much.

Follow the attached link for a (more verbose) example.