Center align vertical and horizontal in a float

Question

I have the code below. I want the second div, the blue one, to have the same width as the red div, and the blue div text to be aligned center both vertically and horizontally.

I can't use flexbox or grid, because need old browser support.

    .red, .blue {
      color: white;
    }

    .red {
    background-color: red;
    }

    .blue {
    background-color: blue;

    }

    .row{ 
      overflow: auto;
     }
     
    .row::after {
      content: "";
      clear: both;
      display: table;
    }

    [class^="col-"] {
        float: left;
    }

    .col-3 {
        width: 30%;
    }


    .col-7 {
        width: 70%;
    }

<div class="row">
      <h1> Example 1</h1> 
      <div class="col-3 red">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</div>
      <div class="col-7 blue">ipsum ipsum</div>
</div>  
    

Answer 1

Or something like this?

.red, .blue {
      color: white;
    }

    .red {
    background-color: red;
    }

    .blue {
    background-color: blue;

    }

    .row{ 
      overflow: auto;
     }
     

    [class^="col-"] {
        display:table-cell;
        width: 30%;
    }


    .col-7 {
        text-align:center;
        vertical-align: middle;
    }
    .row::after {
      content: "";
      display: table-cell;
      width: 40%;
    }

<div class="row">
      <h1> Example 1</h1> 
      <div class="col-3 red">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</div>
      <div class="col-7 blue">ipsum ipsum</div>
</div>

Answer 2

You can use display: table(-cell) instead of floats. Compatibility IE8+. Don't forget to activate table-layout: fixed so browsers will respect width you set and won't try to do their best with content of "cells".
Note: this CSS display mode has little to do with HTML tables, except latter use the same algorithm by default of course. This is not an HTML layout table.

You need to move the heading outside of the "row". You can't wrap as you could with Flexbox or floats.

    .red, .blue {
      color: white;
    }

    .red {
    background-color: red;
    }

    .blue {
    background-color: blue;

    }

    .row{ 
      overflow: auto;
      display: table;
      width: 100%;
      height: 100%;
      table-layout: fixed;
     }
     
    .row::after {
      content: "";
      clear: both;
      display: table;
    }

    [class^="col-"] {
        /*float: left;*/
        display: table-cell;
        height: 100%;
    }

    .col-3 {
        width: 30%;
    }


    .col-7 {
        width: 70%;
    }

<h1> Example 1</h1> 
<div class="row">
      <div class="col-3 red">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</div>
      <div class="col-7 blue">ipsum ipsum</div>
</div>