I'm trying to position two HTML elements with the CSS attribute float: right;, an input element next to it the metric unit of the input. So far I've tried placing the unit next to input without placing it in an element, also placing it in a p element, and both input and the element inside a div element; didn't work. I'd like to ask whether there's a way to stick an element next to another?

here's the code:

.caloriesinput {
  position: relative;
  float: right;
}

<div>
  <h5>Calories</h5>
  <div class="caloriesinput"><input type="text">
    <p>kcal</p>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

and here's how the code shows:

much appreciated for your time.

CodePudding user response：

I think you must change the display of p tag so add this line of code to your CSS:

.caloriesinput p {
  display: inline-block;
}

CodePudding user response：

.caloriesinput {
  position: relative;
  float: right;
}

<div>
  <h5>Calories</h5>
  <div class="caloriesinput"><input type="text"<p>kcal</p>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>