Align one of two strings in DIV to be centered - html

Question

I want text which is written "This text needs to be in middle" to be positioned in the center.
You can view the problem in more detail by clicking the link below:
http://dabblet.com/gist/aadbfca153ec45c6633f
I tried to solve it with <span> tags.

Answer 1

You can use position: absolute; to achieve this. First set the container .option-header to position: relative;, and then the text on the right to position: absolute;. Then all you have to do is move it to the right with right: 0;. You can remove the float.
See the following snippet or your adjusted dabblet.
.option-header{
height: 76px;
width: 591px;
margin: 0 0 14px;
font-size: 32px;
/* padding-bottom: 8px; */
padding: 1px 0px;
text-align: center;
color: white;
font-size: 30px;
font-weight: 600;
padding: 20px 8px;
height: auto;
/* display: inline-block; */
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
/* transition: .4s; */
font-family: 'Alegreya SC',serif;
color: #fefefe;
border-radius: 0 0 6px 6px;
overflow: hidden;
border: 2px solid #e2e2e2!important;
background: #D85D1E;
position: relative;
}
.najjeftinija{
height: 39px;
background: rgb(110, 165, 38);
padding: 1px 0px;
}
.najjeftinija span{
padding-right: 5px;
font-size: 23px;
padding-top: 5px;
font-family: cursive;
}
.cijenadesno{
position: absolute;
right: 0;
}
<div class="option-header najjeftinija width-100"><span>This needs to be in middle </span><span class="cijenadesno">4.95 KM</span></div>

Answer 2

Just change the margin from margin: 0 0 14px; to margin: auto;
Full code
.option-header{
height: 76px;
width: 591px;
margin: auto; /* <-- Change here */
font-size: 32px;
/* padding-bottom: 8px; */
padding: 1px 0px;
text-align: center;
color: white;
font-size: 30px;
font-weight: 600;
padding: 20px 8px;
height: auto;
/* display: inline-block; */
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
/* transition: .4s; */
font-family: 'Alegreya SC',serif;
color: #fefefe;
border-radius: 0 0 6px 6px;
overflow: hidden;
border: 2px solid #e2e2e2!important;
background: #D85D1E;
}