Just give them a width and float: left;, here's an example:

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

It is same way as you do for the two divs, just float the third one to left or right too.

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

float them all left

make sure a width is specified that they can all fit in their container (either another div or the window), otherwise they will wrap

I usually just float the first to the left, the second to the right. The third automatically aligns between them then.

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>

you can float: left for all of them and set the width to 33.333%

display: table;
If text needs to appear
as if on the same line

In other words; if the vertical alignment of text in each <div> needs to be identical, one can attempt a modern retro throwback to yesteryear with the somewhat controversial table styling:

.container {display: table;}
div   {display: table-cell;}

This proved to be quite useful to format CSL-styled citations in Pandoc, as shown below:

div.csl-bib-body {}
div.csl-entry {
    margin-top: 1rem;
    display: table;
    }
div.csl-left-margin {
    display: table-cell;
    }
div.csl-right-inline {
    padding-left: 1ex;
    display: table-cell;
    }

The citation number div and the citation data div are now shown at the exact same height.