Simple CSS Float Issue - html

Question

I am a beginner and I am trying to create something like this
But I am having trouble getting the lines to stack on top of each other to the left of the text.
Can someone help nudge me in the right direction here?
#topbar {
width: 15%;
background-color: #000000;
height: 3px;
float: left;
}
#bottombar {
width: 15%;
background-color: #000000;
height: 1px;
float: none;
clear: both;
}
#LocationText {
float: left;
font-size: 50px;
}
<div id="topbar"></div>
<div id="LocationText">Location</div>
<div id="bottombar"></div>
here is my http://jsfiddle.net/y0sv7shs/

Answer 1

Use ::before and ::after :pseudo-elements.
span {
position: relative;
margin-left: 100px;
font-size: 50px;
}
span::before, span::after {
position: absolute;
content: '';
width: 50%;
height: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
right: -50%;
top: 0;
}
span::before {
left: -50%;
}
<span>Location</span>
Or you could do something like this:
span {
position: relative;
margin-left: 100px;
font-size: 50px;
}
span::before, span::after {
position: absolute;
content: '';
width: 50%;
height: 25%;
border-top: 2px solid black;
border-bottom: 1px solid black;
right: -50%;
top: 37.5%;
}
span::before {
left: -50%;
}
<span>Location</span>
The one that you requested.
span {
position: relative;
font-family: 'Bree Serif', serif;
margin-left: 100px;
font-size: 50px;
color: #A0001F;
font-weight: bold;
}
span::before, span::after {
position: absolute;
content: '';
width: 100%;
height: 15%;
border-top: 2px solid #A0001F;
border-bottom: 2px solid #A0001F;
right: -100%;
top: 42.5%;
}
span::before {
left: -45%;
width: 45%;
}
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<span>CONTACT</span>

Answer 2

In addition to chipChocolate's answer, you may also contain the elements so as to force them to reside above one another in a particular location relative to the text (However, this would take more elements, and isn't as clean):
<div class="locationcontainer">
<div id="topbar"></div>
<div id="bottombar"></div>
</div>
<div id="LocationText">Location</div>
#topbar {
width: 100%;
background-color: #000000;
height: 2px;
}
#bottombar {
width:90%;
background-color: #000000;
height: 2px;
margin-top: 10px;
float:right;
}
.locationcontainer
{
float:left;
width:15%;
margin-right:5px;
}
#LocationText {
float: left;
}
http://jsfiddle.net/fstqdxeu/