How do I get my elements inline in the top left corner? - html

Question

Element 2 is an image for the youtube logo. Element 1 is a button with a visual hover effect with three bars stacked on top of each other.
I want the button on the left and the image right next to it.
I need them in the upper left corner.
Here is a screenshot so far https://postimg.cc/Mn2B8wCR
Here is the code I have so far
.element1 {
display: inline-block;
width: 500px;
}
.element2 {
display: inline-block;
width: 500px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger {
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger>div {
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first {
width: 55px;
top: 25px;
left: 20px;
}
.second {
width: 40px;
top: 45px;
left: 20px;
}
.third {
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div {
width: 60px;
transition: width 0.3s ease;
}
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>

Answer 1

You can wrap it in a container and use display: flex;.
.nav-container{
display: flex;
width: 100%;
}
.element1{
display: inline-block;
width: 120px;
}
.wrapper{
padding-left: 10px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger{
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger > div{
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first{
width: 55px;
top: 25px;
left: 20px;
}
.second{
width: 40px;
top: 45px;
left: 20px;
}
.third{
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div{
width: 60px;
transition: width 0.3s ease;
}
.element2{
display: inline-block;
width: 500px;
}
<div class="nav-container">
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
</div>

Answer 2

In HTML, wrap all of element 1 and 2 with a 'container' div:
<div class="container">
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
</div>
In CSS, make div container flex and into a row.
.container {
display: flex;
flex-direction: row;
}
Change your positions of your hamburger and wrapper class:
.wrapper{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger{
width: 100px;
height: 100px;
cursor: pointer;
background: #636363;
border-radius: 5px;
}

Answer 3

Is this you want to do?
Edit:
Here I done below changes:
Removed all styles of the .wrapper which don't need there
Added vertical-align: middle for .element1 and .element2
Removed width from .element1 which don't need there
Added margin-left to .element2 for space
.element1{
display: inline-block;
vertical-align: middle
}
.element2{
margin-left: 30px;
display: inline-block;
vertical-align: middle
}
.hamburger{
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger > div{
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first{
width: 55px;
top: 25px;
left: 20px;
}
.second{
width: 40px;
top: 45px;
left: 20px;
}
.third{
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div {
width: 60px;
transition: width 0.3s ease;
}
.logo {
width: 300px
}
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>

Answer 4

you can use this
.container {
display:inline-block;
margin-right:auto }
/* the margin right auto is to force the elements to be on the left corner */ps it should be only the imge and the button inside this div(class='container')