Hello. I do not understand what the problem is, why two indicators in two lines, and not in one line.

Maybe something wrong wrote.

Thanks in advance for your help. )

Code:

.text-center{ text-align: center; } .healthbar{ width: 80%; height: 40px; background-color: #eee; margin: auto; transition: width 500ms; } 
 <html> <body> <div id="app"> <section class="row"> <div class="small-6 columns"> <h1 class="text-center">You</h1> <div class="healthbar"> <div class="healthbar text-center" style="background-color:green; margin: 0;color: white;"> </div> </div> </div> <div class="small-6 columns"> <h1 class="text-center">Monster</h1> <div class="healthbar"> <div class="healthbar text-center" style="background-color:green; margin: 0;color: white;"> </div> </div> </div> </section> </div>

  • Because div block element. I assume that your small-6 style should have changed this in some way. Perhaps these styles are not connected or not written. - Moonvvell

1 answer 1

you need to add to css

 section.row > * { float: left; } .small-6{ width: 50%; }