html - align divs left and right next to each other

Question

I'm not sure if i'm doing this right.

Trying to align divs left and right on same line, But when i resize window the right div drops down and stays to the right.

How would i re align the divs so that when i make the window smaller the right drops down and lines up with left div, maybe centre both divs?

Do i need to add them into a grid list with <lu>?

Also how would i align the phone numbers up?

.text-center {
  text-align: center!important;
}

.text-left {
  text-align: left!important;
}

.text-right {
  text-align: right!important;
}

.right {
  float: right!important
}

.left {
  float: left!important
}

<div class="left">
  <h2>Infomation:</h2>
  <p>
    Phone: (00) 00000000<br/> Fax: (00) 00000000<br/> Email: <a href="mailto:[email protected] ">[email protected]<br/></a>
  </p>
</div>

<div class="right text-right">
  <h2>Business Hours:</h2>
  <p>
    Monday - Thursday<br/> 8:30 - 5:00<br/> Friday <br/> 8:30 - 3:30<br/>
  </p>
</div>

Answer 1

I recommend using media queries for this. The logic is pretty simple. First, set the CSS rules for small screens. Then use a media query to apply new CSS rules for whenever the window is wider than a certain width.

.text-center {
  text-align: center!important;
}    
.text-left, .text-right {
  text-align: left!important;
}    
.left, .right {
  display: block;
}    
@media all and (min-width: 400px) {
  .left {
    float: left!important
  }
  .right {
    float: right!important
  }
  .text-right {
    text-align: right!important;
  }
}