Multiple div inside caption tag - html

Question

I am trying to divide a caption area into 2 div each 50%, align the text to left on the left div and align the text to right on the other one.
I cannot quite get the result I want, how can I fix this?
.tcaption {
width: 100%;
background-color: #cee7ff;
}
.tcaption-left-part {
color: blue;
width: 50%;
float: left;
text-align: left;
padding: 5px 0 5px 0;
font-weight: bold;
}
.tcaption-right-part {
color: blue;
width: 50%;
float: right;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="form-wrapper">
<table class="ticket-table">
<caption class="tcaption">
<div class="tcaption-left-part">
Ticket Details
</div>
<div class="tcaption-right-part">
<a class=" btn btn-default " href="{% url 'ticket_edit' ticket.pk %} "><i class="fa fa-edit fa-2x "></i></a>
</div>
</caption>
<tbody>
<tr>
<td>Ticket Number:</td>
<td>{{ticket.pk}}</td>
</tr>
</tbody>
</table>
</div>

Answer 1

If you display these as a table-cells (using the display:table-cell css) it'd make things easier. I didn't swap in a blue colour, but focused on your position problem.
You can probably afford to make the columns different widths if what you want is one column to be far-left aligned and the other to be aligned to the far right (or just have both close to 100% - not quite 100 cos of padding/margins). But I'll leave it for you to mess with. I put in span tags around the Ticket Details for better css control.
.ticket-table, .tcaption {
width: 100%;
background-color: var(--myBlue3);
}
.tcaption .left-part,
.tcaption .right-part {
display: table-cell;
width: 50vh;
color: var(--myBlue6);
vertical-align:top;
}
.left-part, .left-part span {
text-align: left;
padding: 5px 0 5px 0;
font-weight: bold;
float:left;
}
.right-part, .right-part a {
text-align: right;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="form-wrapper">
<table class="ticket-table">
<caption class="tcaption">
<div class="left-part">
<span>Ticket Details</span>
</div>
<div class="right-part">
<i class="fa fa-edit fa-2x">Ticket.pk</i>
</div>
</caption>
<tbody>
<tr>
<td>Ticket Number:</td>
<td class="right-part">{{ticket.pk}}</td>
</tr>
</tbody>
</table>
</div>

Answer 2

That's because the <caption> is only as big as it's parent <table>. Increase the width of the <table> and you should get what you want.
.tcaption {
width: 100%;
background-color: #cee7ff;
}
table {
width: 100%;
}
.tcaption-left-part {
color: blue;
width: 50%;
float: left;
text-align: left;
font-weight: bold;
}
.tcaption-right-part {
color: blue;
width: 50%;
float: right;
text-align: right;
}
<div class="form-wrapper">
<table class="ticket-table">
<caption class="tcaption">
<div class="tcaption-left-part">
Ticket Details
</div>
<div class="tcaption-right-part">
<a class="btn btn-default"><i class="fa fa-edit fa-2x">Right Aligned Text</i></a>
</div>
</caption>
<tbody>
<tr>
<td>Ticket Number:</td>
<td>{{ticket.pk}}</td>
</tr>
</tbody>
</table>
</div>