Clear three text elements to the right of small icon without wrapping

Question

I want to float three text items right of a left-floated icon that is smaller than the text items, without the text items wrapping.

div {
    width:30%;
}
div i {
    margin-right:0.75em; 
    padding:0.5em;
    float:left;
    color:#fff;
    border-radius:50%;
    clear:both;
    background:rgb(255,143,69);
}
h3 {
    margin-bottom:0.75em;
}
p {
    margin-bottom:2.75em; 
    overflow:auto;
}
a {
    font-size:0.9em;
    color:#ff8f45; 
} 

As you can see from --

http://jsfiddle.net/zu3k814d/7/

-- I've cleared the heading and paragraph with clear on the icon and overflow for the paragraph but the link/anchor below stays stuck left. I would like it to line up with the heading and paragraph above it. I could give it a left margin until it clears the image and lines up with the stuff above, but I'm sure there's a cleaner way.

Answer 1

You just needed to reorganize your html to make it easier to float both items.

Here is the working code. jsfiddle --

Answer 2

Instead of using float, use flex.

.container {
  display: flex;
  width: 30%;
}

.column {
  flex-direction: column;
}

i {
  margin-right: 0.75em;
  padding: 0.5em;
  color: #fff;
  border-radius: 50%;
  clear: both;
  background: rgb(255, 143, 69);
}

h3 {
  margin-top: 0;
  margin-bottom: 0.75em;
}

p {
  margin-bottom: 2.75em;
  overflow: auto;
}

a {
  font-size: 0.9em;
  color: #ff8f45;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container">
  <div>
    <i class="material-icons">fingerprint</i>
  </div>
  <div class="column">
    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <a href="">Learn more...</a>
  </div>
</div>