Div overflow does not allign correct : How can I make the second line be one line and not broken up as it is now.

[![enter image description here][1]][1]

And look like this: 

[![enter image description here][2]][2]


I tried to use the `display: table` and `table-cell` but it makes no difference. 
I never seem to get along with CSS.

css:

    <style>
    
    .column1 {
        float: left;
        width: 10%;
        font-size: 350%;
    }
    .column2 {
        float: left;
        width: 10%;
        font-size: 350%;
    }
    .column3 {
        float: left;
        width: 80%;
        font-size: 350%;
    }
    
    
    </style>

html:


    <div class="row" display: table;>
      <div class="column1" style="background-color:#ccc;" display: table-cell;>
    	<b>col1</b><br>
    	<div style="background-color:#FF0000;">32</div>
    	<div style="background-color:#00FF00;">33</div>
      </div>
      <div class="column2" style="background-color:#ccc;" display: table-cell;>
    	<b>col2</b><br>
    	<div style="background-color:#FF0000;">11:00</div>
    	<div style="background-color:#00FF00;">12:00</div>	
      </div>
      <div class="column3" style="background-color:#ccc;" display: table-cell;>
    	<b>col3</b><br>
    	<div style="background-color:#FF0000;">This is some text That will overflow the div by a few words</div>
    	<div style="background-color:#00FF00;">Next line</div>
      </div>

  [1]: https://i.stack.imgur.com/kdj5z.png
  [2]: https://i.stack.imgur.com/YCONT.png