online div not side by side - html

Question

I have this code below. I have one container div with 2 inner div. I want the two inner divs to be side by side so I used in-line block on the two divs. Also I want the two divs to be start on top. In the demo below they are stuck on top and I dont know why while in my own project they are side by side but first div starts on top while second div does not start on top.
What is the best css style to make the 2 div in a container start on top while it is side by side?
What is the best way to make two div side by side?
.homissync {
display: block;
height: 100%;
}
.homissync>div {
padding: 27px;
margin: 3px;
display: inline-block;
}
#homissyncbuttons {
height: 100vh;
width: 20%;
margin: 3px;
}
#homissynclist {
height: 100vh;
margin: 3px;
width: 68%;
}
#homissyncbuttons .libuttons {
width: 100% !important;
background-color: #ff0000;
}
.vBorder {
border: solid 1px #ddd;
}
button, input[type=submit] {
padding: 8px 20px;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,0.35);
background-color: orange;
font-size: 0.9rem;
font-weight: bold;
border-radius: 3px;
border: 0;
outline: none !important;
margin: 3px 0;
cursor: pointer;
transition: background 1s ease-in-out;
}
<div class=" homissync">
<div id="homissyncbuttons" class=" vBorder">
<ul>
<li>
<button class="libuttons">UACS</button>
</li>
<li>
<button class="libuttons">Medicine</button>
</li>
<li>
<button class="libuttons">Non-Drugs</button>
</li>
<li>
<button class="libuttons">Miscellaneous</button>
</li>
</ul>
</div>
<div id="homissynclist" class=" vBorder">
<button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
<button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
<div id="homissynclistresult" class=" vPadding vBorder">
</div>
</div>
</div>

Answer 1

Please try this code instead of the display:inline-block; and just add float:left.
.homissync>div {
display: block;
float: left;
}

Answer 2

you can use float: left; instead of display: inline-block;
.homissync {
display: block;
height: 100%;
}
.homissync>div {
padding: 27px;
margin: 3px;
float:left;
}
#homissyncbuttons {
height: 100vh;
width: 20%;
margin: 3px;
}
#homissynclist {
height: 100vh;
margin: 3px;
width: 65%;
}
#homissyncbuttons .libuttons {
width: 100% !important;
background-color: #ff0000;
}
.vBorder {
border: solid 1px #ddd;
}
button, input[type=submit] {
padding: 8px 20px;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,0.35);
background-color: orange;
font-size: 0.9rem;
font-weight: bold;
border-radius: 3px;
border: 0;
outline: none !important;
margin: 3px 0;
cursor: pointer;
transition: background 1s ease-in-out;
}
<div class=" homissync">
<div id="homissyncbuttons" class=" vBorder">
<ul>
<li>
<button class="libuttons">UACS</button>
</li>
<li>
<button class="libuttons">Medicine</button>
</li>
<li>
<button class="libuttons">Non-Drugs</button>
</li>
<li>
<button class="libuttons">Miscellaneous</button>
</li>
</ul>
</div>
<div id="homissynclist" class=" vBorder">
<button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
<button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
<div id="homissynclistresult" class=" vPadding vBorder">
</div>
</div>
</div>

Answer 3

display:inline-block have default white space, you need to remove the white space. otherwise you need to relace the display-inline-block with float:left , there is so many options to remove the white space please check the reference link below
Why is there an unexplainable gap between these inline-block div elements?