Inconsistent "inline" class

Hey everyone. I’m working on my Simon game and I have my control buttons in two non-bootstrap rows. The strict button, the display, and the start button all have a class inline, which, in the css, is styled as display: inline;. This puts the divs in a neat little row. But when I try to apply the same class to my <p> classes for “off” and “on” and the toggle switch in between them, it doesn’t look right at all. I’d love it if someone could take a look and tell me what I might be missing here. Here’s a link to my pen. The off, on, and switch divs are from lines 15-21. Thanks!

Paragraph tags are the full width of the parent. Try using <span> instead of <p>. You’ll also want to change your outer-switch to use display: inline-block

1 Like