HTML div in the cell - stretch, positioning etc - html

Question

Have read a lot and even able to make some of this now, but not together ) Please help.
I need th that contains the caption and the "icon" that consists of one char. And I need caption to be aligned left and icon - right. In the same th. ANd they both must be in the middle of the cell vertically. And icon should be in the center/middle of the div as well. Please help. I cannot align caption and cannot align icon in their div. Dunno why, looks like html/css were invented by aliens, I don't understand that logic and how it was possible to make such a simple thing so stupidly complicated )
Here's the screenshot of what I need
table
{
border-collapse: collapse;
border-spacing: 0;
}
th
{
border: 1px solid #fff;
white-space: nowrap;
background: #000;
color: #fff;
padding: 0.5em;
text-align: center;
vertical-align: middle;
display: table-cell;
}
td
{
border: 1px solid #fff;
white-space: nowrap;
background: #eee;
width: 20em;
padding: 0.5em;
text-align: center;
vertical-align: middle;
}
div.left
{
display: inline-block;
text-align: left;
vertical-align: middle;
border: 1px solid #7f9;
}
div.right
{
text-align: center;
vertical-align: middle;
position: relative;
height: 2em;
border: 1px solid #f79;
display: inline-block;
float: right;
width: 2em;
}
div.reload
{
border: 1px solid #79f;
text-align: center;
vertical-align: middle;
width: 2em;
height: 2em;
position: absolute;
right: 0;
bottom: 0;
display: table;
}
<table>
<tr>
<th>
<div class="left">Title 1</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
<th>
<div class="left">Title 2</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
</tr>
<tr>
<td>
Some data
</td>
<td>
123.45
</td>
</tr>
</table>
Have found an answer (based on your advices, thank you!!!)
That was easy and still dumb:)
table
{
border-collapse: collapse;
border-spacing: 0;
}
th
{
border: 1px solid #fff;
white-space: nowrap;
background: #000;
color: #fff;
text-align: left;
vdrtical-align: middle;
line-height: 2em;
}
td
{
border: 1px solid #fff;
white-space: nowrap;
background: #eee;
width: 20em;
padding: 0.5em;
}
div.left
{
display: inline-block;
text-align: left;
vertical-align: middle;
border: 0px solid #7f9;
display: inline-block;
float: left;
}
div.reload
{
border: 1px solid #999;
text-align: center;
vertical-align: middle;
width: 1.5em;
margin: 0.2em;
line-height: 1.5em;
right: 0;
bottom: 0;
display: inline-block;
float: right;
}
<table>
<tr>
<th>
<div class="left">Title 1</div>
<div class="reload">⟳</div>
</th>
<th>
<div class="left">Title 2</div>
<div class="reload">⟳</div>
</th>
</tr>
<tr>
<td colspan=2>
Some data
</td>
<td colspan=2>
123.45
</td>
</tr>
</table>

Answer 1

Maybe something like this ?
CSS:
.view-table
{
display:table;
width:100%;
}
.view-row
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.left
{
text-align:left;
background-color: lightblue;
}
.right
{
text-align:right;
background-color: pink;
}
HTML :
<div class="view-table">
<div class="view-row">
<div class="left">Title</div>
<div class="right">⟳</div>
</div>
</div>

Answer 2

If you want the icon on the right side of the th and the title on the left, you need text-align-last:justify instead of text-align:center in the th.
Please note that you also need another text-align-last on the div.reload, else its text-align will have no effect!
table {
border-collapse: collapse;
border-spacing: 0;
}
th {
border: 1px solid #fff;
white-space: nowrap;
background: #000;
color: #fff;
padding: 0.5em;
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
}
td {
border: 1px solid #fff;
white-space: nowrap;
background: #eee;
width: 20em;
padding: 0.5em;
text-align: center;
}
div.left {
display: inline-block;
vertical-align: middle;
text-align: left;
border: 1px solid #7f9;
}
div.right {
display: inline-block;
border: 1px solid #f79;
display: inline-block;
}
div.reload {
border: 1px solid #79f;
width: 2em;
line-height: 2em;
text-align: center;
-moz-text-align-last: center;
text-align-last: center;
}
<table>
<tr>
<th>
<div class="left">Title 1</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
<th>
<div class="left">Title 2</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
</tr>
<tr>
<td>
Some data
</td>
<td>
123.45
</td>
</tr>
</table>
Or, this fiddle.