How to make two HTML element align in single line? - html

Question

I have two HTML element in one row. Whoch should display something like this:
For that I made both the element display-inline and also I set float left and right respectively. But they are displaying something like this:
You can see they are not being aligned properly.
.selected-account{
display: inline;
float: right;
color: #0679ca;
}
.select-account-accordion{
display: inline;
float: left;
color: #0679ca;
}
<div id="select-account" class="col-sm-12 col-md-12 disabled-billing-accordion">
<h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
<span id="account-selected" class="selected-account">0 of 8 account selected</span>
</div>
Can you please suggest on this?
Edit: I think because I put those two element in the div class which I put for creating accordion, so thats why its creating trouble. Please see the style below for that div which is having class "disabled-billing-accordion"
.disabled-billing-accordion h3::before{
background: url("/static/img/accordion.png") no-repeat scroll 0 0
rgba(0, 0, 0, 0);
background-position: -1px -97px;
content: " ";
width: 34px;
height: 34px;
left: 0;
position: absolute;
top: 25px;
margin-left: 1em
}
.disabled-billing-accordion h3{
padding: .2em 0 0 3em;
color: #0679ca;
font-size: 1.5em;
line-height: 2.1875em;
margin-bottom: 8px;
font-weight: 100 !important
}
.disabled-billing-accordion{
padding: 10px;
border-bottom: 1px solid #bdbdbd
}

Answer 1

HI now you can define margin:0; and line-height as like this
.selected-account{
float: right;
color: #0679ca;
margin:0;
line-height:20px;
}
.select-account-accordion{
float: left;
color: #0679ca;
margin:0;
line-height:20px;
}
<div id="select-account" class="col-sm-12 col-md-12 disabled-billing-accordion">
<h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
<span id="account-selected" class="selected-account">0 of 8 account selected</span>
</div>

Answer 2

There is margin for h3. Try
#select-acct {
margin: 0;
}

Answer 3

if you use h3 it will take default some margin and line-height if u check in the image while inspect u can see ,reference https://plnkr.co/edit/3O4773wA10jV1tC92zik?p=preview
So u have to add the styles for margin and line-height
.selected-account{
display: inline;
float: right;
color: #0679ca;
margin:0;
line-height:20px;
}
.select-account-accordion{
display: inline;
float: left;
line-height:20px;
margin:0;
}

Answer 4

You can use position:fixed and add left:"width of first one"
Like,
div1{
position:fixed;
width:200px;
height:300px;
}
div2{
position:fixed;
left:200px;
width:200px;
height:300px;
}
Hope it will help.
Edit
I have added some inline css in your code with position:fixed Here is screen shot.

Answer 5

You can simply remove the float: left; property from h3 ie,
.select-account-accordion {
display: inline;
/* float: left; */ //Remove this line
color: #0679ca;
}

Answer 6

Either reduce margin-top: 0px; for
<h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
or
add equivalent margin-top example margin-top: 20px for
<span id="account-selected" class="selected-account">0 of 8 account selected</span>
.selected-account{
margin-top: 0px;
display: inline;
float: right;
color: #0679ca;
}
.select-account-accordion{
margin-top: 0px;
display: inline;
float: left;
color: #0679ca;
}
<div id="select-account" class="col-sm-12 col-md-12 disabled-billing-accordion">
<h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
<span id="account-selected" class="selected-account">0 of 8 account selected</span>
</div>