Div position in the middle of another vertical div - html

Question

I would like to add flight duration in the middle-left of each blue line. I was trying to do following tricks, but unfortunately doesn't work.
This is how to looks like at the moment:
CodePen example
HTML:
<span class="col-md-12 roundtrip">
<div class="col-md-6 trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
<div class="col-md-6 trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Los Angeles</div>
</div>
</span>
LESS:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
margin-right: 50%;
}
.flight {
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
.flight-duration{
margin:auto auto auto 0;
}

Answer 1

This is one of my favorite tricks:
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Applied to your specific example:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
margin-right: 50%;
}
.flight {
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
position: relative;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
.flight-duration {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Just messing around, centering the text horizontally too */
white-space: nowrap;
background: rgba(255, 255, 255, .75);
width: 81px;
left: -38px;
text-align: center;
}
<span class="col-md-12 roundtrip">
<div class="col-md-6 trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
<div class="col-md-6 trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Los Angeles</div>
</div>
</span>
Source

Answer 2

Assuimg it's the '1-30h' text you're wanting to move:
Try positioning your .flight-duration class with this:
.flight-duration {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin:20px 0px 0px -40px;
}
The -40px is affecting the left-hand margin, the lower the number the further left your text will sit. Higher numbers will cause the text to sit on the right of the blue line.

Answer 3

Here you go, add this to your code :)
.flight-path {
position: relative;
}
.flight-duration{
display: block;
position: absolute;
right: 6px;
width: 46px;
text-align: center;
top: 50%;
transform: translateY(-50%)
}
I forked your codepen, to show a new demo
http://codepen.io/antraxis/pen/jbPpQY?editors=110