Q:

Div with attached hr on its right side middle

I am too week on css design and I am trying myself to design for a requirement which looks similar to the image attached
Here is my css styles  
<style>
.round{
    border-bottom-right-radius:5px;
    border-top-right-radius:5px;
}

hr {
    margin-top:10px;

    border: none;
    height: 1px;
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

And here is the div which is in body  
<div class="container">
  <div>
      <div class="round col-md-2" style="border: 2px solid; float:left;">
        English
      </div>
        <hr/>
  </div>
</div>

With my code, I believe I reached almost 60%.  Here is the output from my code

Can someone please guide me to solve the issue. 
Thanks in advance. 

A:

See this bootply
I added transform: translateY(-50%); to your text box to move it up over the <hr/>

