This is my code

<div className='product'>
    <img className='productImg' src={this.props.image} alt='of person'></img>
    <div style={{float:'left'}}>{this.props.name}</div>
    <br />
    <div style={{float: 'left'}}>${this.props.price}</div>
    <br />
    <div style={{color: this.pickRatingColor(this.props.rating), float:'right'}}>{this.props.rating}/5</div>
    

</div>

This is the result

(I just used a random screenshot i had for the picture so don't judge)

The thing that I simply can't wrap my head around is why the price doesn't go below the name even though I added a break. I would appreciate it if someone could explain why this happens and how I can fix it. Thank you!

CodePudding user response：

I could not understand why you are using float ; it will be fixed if you delete your styles that added in name and price div;

CodePudding user response：

HeIlo !

Try <br> instead of <br />