How to have two divs in one line. right and left

Question

<div className="content">
 <div style={{ float: "left" }}> {pedido.nombre}</div> //name
 <div style={{ float: "right" }}> ${pedido.precio}</div> //price
</div>

it should be name at left side and price on the right side, but it stays one side of the other enter image description here

right there enter image description here

https://stackblitz.com/edit/typescript-apbokz?file=index.html if it really needs to be 'float'. Otherwise use flex like Robert and azium suggest - also see this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — David Renner, Mar 19 '20 at 23:05
[So none of these worked for you?](https://stackoverflow.com/search?q=two+divs+in+a+row) — Rob, Mar 19 '20 at 23:27
Does this answer your question? [how to place two divs besides each other](https://stackoverflow.com/questions/5792367/how-to-place-two-divs-besides-each-other) — Rob, Mar 20 '20 at 01:09

score 5 · Accepted Answer · edited Apr 20 '23 at 14:29

5

The key is to justify-content: space-between:

.content {
  display: flex;
  justify-content: space-between;
}

<div class="content">
  <div style="background: yellow">Product name</div>
  <div style="background: orange">Price</div>
</div>

The two divs will have space in between.

edited Apr 20 '23 at 14:29

Dan Dascalescu

143,271
52
317
404

answered Mar 19 '20 at 22:59

Robert Feduș

311
2
16

i don't know how to, sorry, very noobie at this – Drokoz Mar 19 '20 at 23:16
@Drokoz take a look in [here](https://stackoverflow.com/questions/39853646/how-to-import-a-css-file-in-a-react-component) if you don't know how to import a css file into your components, or just do this in-line:
– Robert Feduș Mar 19 '20 at 23:20
Did you remove "float: left" and "float: right"? Try this way. – Robert Feduș Mar 19 '20 at 23:53
Nop, i tried a lot of things, i also have an accordion that it doesn't work. But is just in that part – Drokoz Mar 20 '20 at 00:02
It's working now, i deleted a div above that. Thanks a lot!! i really appreciate it! – Drokoz Mar 20 '20 at 00:10

score 1 · Answer 2 · answered Mar 19 '20 at 23:19

While a flexbox approach works perfectly fine, I'd like to show how to achieve the described behaviour using float.

Here's the CSS

.float--left {
  float: left
}

.float--right {
  float: right
}

.clear {
  clear: both;
}

And some HTML

<div class="float--left">name</div>
<div class="float--right">price</div>

<div class="clear">other content</div>

*Note: Added a example how to reset the float behaviour back to normal using clear *

score 0 · Answer 3 · answered Dec 05 '22 at 14:39

Flexbox will help you:

Here's the HTML:

<div class="content">
    <div class="left">
        Left Side
    </div>
    <div class="right">
        Right Side
    </div>
</div>

Here's the CSS:

.content{
    display: flex;
}

.right{
    margin-left: auto;
}

How to have two divs in one line. right and left

3 Answers3