Text in table-cell on top and bottom - css

Question

I got the following setup:
<div class="table">
<div class="cell">Cell 1 [fixed width]</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3 [fixed width]</div>
</div>
with this css:
.table {
display: table-cell;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
Now I want to have some text in Cell 3. A bit of text which should be at the bottom of the cell. With vertical-align I could do this easily but I got another line which should stay at the middle or top of the cell. How can I do this? I tried some things with height settings but these have no effect on the cell. And line-height wouldn't work either because the height is not fixed.

Answer 1

Check out below answer:
Fiddle
<div class="table">
<div class="cell1">Cell 1 [fixed width]</div>
<div class="cell2">Cell 2</div>
<div class="cell3">Cell 3 [fixed width] <div class="bot_txt">bottom text</div></div>
</div>
.table {
display: table;
width: 100%;
}
.cell1 {
display: table-cell;
vertical-align: middle;
width: 33%;
height:200px;
background-color:red;
}
.cell2 {
display: table-cell;
vertical-align: middle;
width: 33%;
height:200px;
background-color:green;
}
.cell3 {
background-color:yellow;
display: table-cell;
vertical-align: top;
width: 33%;
height:200px;
position:relative;
}
.bot_txt {
position:absolute;
bottom:0px;
}

Answer 2

Is this what you are looking for?
.table {
display: table;
width: 100%;
border: 2px solid red;
}
.cell {
display: table-cell;
height: auto;
vertical-align: middle;
text-align: center;
border: 1px solid black;
}
<div class="table">
<div class="cell">Cell 1 [fixed width]</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3 [fixed width]
<br>additional line</div>
</div>