I am trying to add a second element, a text input, next to an existing button, and have them be side-by-side. The button originally occupied most of the space. Now I just want each element to take up roughly 50% of the width of the space available and be next to each other.
Code + image below. I added the parent div and the sponsored_post_bid element to try and achieve side-by-side.
main .add-post-modal .add-post-categories .extra-category {
float: left;
}
main .add-post-modal .add-post-categories .extra-category input {
width: 0px !important;
height: 0px !important;
overflow: hidden;
-moz-appearance: none;
}
main .sponsored_post_bid {
width: 48%;
height: 100%;
float: right;
}<div style="margin: auto; width: 100%;">
<div class="extra-category">
<input type="radio" name="category" id="cat9" value="Sponsored" />
<label for="cat9">Sponsored Post</label>
</div>
<input class="sponsored_post_bid" value="Bid $$$" />
<div>
Unfortunately they are on different lines. If I try for .extra-category to have width: 48% I get the following:
Which is also not the intended goal.
>Solution :
I added float to your input and a class called new I added to the label. I wasn’t sure if you wanted to use flex-box or not so I figured going the old fashion route was okay. However, it seems like perhaps in your screenshots the width is not 100% of body which may alter this result. Let us know if that’s the case.
main .add-post-modal .add-post-categories .extra-category {
float: left;
}
main .add-post-modal .add-post-categories .extra-category input {
width: 0px !important;
height: 0px !important;
overflow: hidden;
-moz-appearance: none;
}
main .sponsored_post_bid {
width: 48%;
height: 100%;
float: right;
}
input[type=radio] {
float: left;
}
label.new {
float: left;
margin-right: 10px;
}<div style="margin: auto; width: 100%;">
<div class="extra-category">
<input type="radio" name="category" id="cat9" value="Sponsored"/>
<label for="cat9" class="new">Sponsored Post</label>
</div>
<input class="sponsored_post_bid" value="Bid $$$" />
<div>