100% height with multi-column SPAN

Question

I have the code below with three columns. I want to have a border for each column, and each column also has its own color. I have tried many previous examples of the problem with multiple css columns and they do not work. For example, I do not want to use the dirty trick of the background image to display the background color and border, because the website allows you to change the color. Also, I cannot use the method using the border thickness as a color, and then use negative margin with relative positioning. This method does not allow the use of a border. Below is the code. What is the best way? Thanks

<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
 <span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
 <span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
 <span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>

Answer 1

span height: 100%; top div height: auto;?

, , span display:block; div.

BTW2: - " " (, ), .;) , -...

Answer 2

<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>

, .

Answer 3

As MaRiz said, you should use the table in this case and set the CSS property: border-collapse: collapse;