How to create side by side layout of an image and label? - html

Question

I have been trying for a while now and cant seem to achive the bellow design:
.exploreItem {
background-color: #353258;
/* rgba(31, 31, 31, 1) */
border: 1px solid #4152F1;
color: white;
/* padding: 20px 24px; */
cursor: pointer;
width: 90%;
height: 45px;
/* font-size: 15px;
font: Arial;
font-family: sans-serif;
display: block; */
}
.exploreImg {
/* background-color: lightblue; */
display: inline-block;
vertical-align: top;
height: 30px;
/* width: 10px; */
padding-left: 10px;
}
.exploreLabel {
/* vertical-align: middle; */
/* background-color: grey; */
display: inline-block;
font-size: 15px;
font: Arial;
font-family: sans-serif;
/* width: 10px; */
margin-top: 0px;
}
<div class="exploreItem" id="exploreItem">
<img class="exploreImg" src="images/defaultProfImg.png">
<label class="exploreLabel">Explore</label>
</div>
How can I create the intended design layout? (An image next to the explore label like in the image)

Answer 1

You even don't need the image just use css to do it. And even if you use image you can use display: flex for .exploreItem and align-items: center can do the magic.
I had put down the simpler css only solution here with :before pseudo element.
.exploreItem {
background-color: #353258;
border: 1px solid #4152F1;
color: white;
cursor: pointer;
padding: 16px;
width: 90%;
border-radius: 32px;
}
.exploreLabel {
display: flex;
align-items: center;
font-size: 15px;
font: Arial;
font-family: sans-serif;
margin-top: 0px;
}
.exploreLabel:before {
content: '';
height: 28px;
width:28px;
background-color: #4152F1;
border: 1px solid #a89dff;
display: block;
margin-right: 16px;
border-radius: 50%;
}
<div class="exploreItem" id="exploreItem">
<label class="exploreLabel">Explore</label>
</div>

Answer 2

.wrapper {
width: 200px;
}
.exploreItem {
width: 100%;
display: flex;
background: transparent;
padding: 20px 30px;
border: 1px solid transparent;
border-radius: 50px;
align-items: center;
cursor: pointer;
}
.exploreItem label {
color: #919191;
}
.exploreItem.active {
display: flex;
background: #2F2D50;
border: 1px solid #483EF1;
}
.exploreItem.active label {
color: #ffffff;
}
.exploreItem i {
display: block;
background: #A3A3A3;
border: 1px solid transparent;
width: 25px;
height: 25px;
border-radius: 50px;
margin-right: 10px;
}
.exploreItem.active i {
background: #483EF1;
border: 1px solid #A5A0FF;
}
<div class="wrapper">
<div class="exploreItem active">
<i></i>
<label class="exploreLabel">Explore</label>
</div>
<div class="exploreItem">
<i></i>
<label class="exploreLabel">Explore</label>
</div>
</div>

Answer 3

Use below code:
HTML:
<div class="outer">
<div class="round"></div>
<label>
<span>Explore</span>
</label>
</div>
CSS:
.outer
{
background: #353258;
border: 1.5px solid #4152F1;
color: white;
padding: 7px 8px;
cursor: pointer;
width: 150px;
height:33px;
border-radius: 30px;
cursor: pointer;
}
.round
{
background: #502ffb;
height: 28px;
width: 28px;
display: inline-block;
border: 1px solid white;
border-radius: 50%;
}
label
{
color: white;
display: inline-block;
cursor: pointer;
}
label span
{
position: absolute;
margin-top: -24px;
margin-left: 3px;
font-size: 17px;
}