Wrapping header and p around pseudo elements

Question

I have a div that has a pseudo element before which appears into top left corner of the div and then a h2 and p element that I want to wrap around it, I have found this article Faking ‘float: center’ with Pseudo Elements which explains it a little. Basically, it works if I don't use h2 or p but as soon as I do it stop wrapping.

.hh-info-content:before {
  content: "";
  float: left;
  height: 100px;
  width: 35%;
  background-color: #006;
}

.hh-info-content {
  position: relative;
  float: left;
  min-height: 120px;
  width: 300px;
  background-color: red;
  padding-top: 0!important;
  padding: 0.8em;
}

.hh-info-content h3 {
  font-family: 'Baloo', cursive !important;
  font-size: 1.75em !important;
  line-height: 1em;
  color: #414141;
  text-align: right;
  margin: 0px !important;
  padding: 0px !important;
  padding-top: 4%!important;
}

.hh-info-content p {
  float: left;
  font-family: 'Didact Gothic', sans-serif !important;
  color: #414141;
  line-height: 1.4em;
  text-align: right;
  margin: 0 !important;
  padding: 0 !important;
}

<div class="hh-info-content">
  <h3>Title</h3>
  <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
<br />
<div class="hh-info-content">
  Title Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text
  Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text
  Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text
  Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

Answer 1

This works by removing the float from your h3 and p elements.

.hh-info-content:before{
    content: "";
    float: left;
    height: 100px;
    width: 35%;
    background-color:#006;
}
.hh-info-content{
    position:relative;
    float:left;
    min-height:120px;
    width:300px;
    background-color:red;
    padding-top:0!important;
    padding:0.8em;
}
.hh-info-content h3{
    font-family: 'Baloo', cursive !important;
    font-size:1.75em !important;
    line-height:1em;
    color:#414141;
    text-align:right;
    margin:0px !important;
    padding:0px !important;
    padding-top:4%!important;
}
.hh-info-content p{
text-align: left;
    font-family: 'Didact Gothic', sans-serif !important;
    color:#414141;
    line-height:1.4em;
    text-align:right;
    margin:0 !important;
    padding:0 !important;
}

<div class="hh-info-content">
      <h3>Title</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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <br />
    <div class="hh-info-content">
      Title
      Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    </div>