Trouble Horizontally Aligning Two Elements inside Div-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

Give this snippet a whirl.

<html>

<head>

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <style>
    body {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }

    .container {
      width: 400px;
      padding: 24px;
      font-size: 13px;
      margin: 0 auto;
    }

    .main {
      grid-column: 1 / -1;
      grid-gap: 0;
      display: grid;
      grid-template-columns: auto auto;
      align-items: center;
    }

    input[type=text] {
      background: #F4F6F8;
      border: 1px solid #9EADBB;
      border-radius: 4px;
      padding: 6px 12px;
      box-sizing: content-box;
      width: 100%;
    }

    #field {
      width: 100%;
    margin-top: 12px;
    }

 
  </style>
</head>

<body>

  <div class="container">
    <div class="main">
      <div>
        <input type="radio" name="category" id="cat9" value="Sponsored" />
        <label for="cat9">Sponsored Post</label>
      </div>
      <input class="sponsored_post_bid" type="text" value="Bid $$$" />

    </div>
    <input id="field" type="text" placeholder="Please enter your name">

  </div>



</body>

</html>

CodePudding user response：

Try style="display:inline-block" on inner div:

<div style="margin: auto; width: 100%;">
  <div class="extra-category" style="display:inline-block">
    <input type="radio" name="category" id="cat9" value="Sponsored"/>
    <label for="cat9">Sponsored Post</label>
  </div>
  <input class="sponsored_post_bid" value="Bid $$$"/>
<div>