How to override the display:block of an element

[Jack_Tauson_Sr]

I have the following test form showing like this in my JSFiddle:

I want to show the checkboxes in line with the text, like this:

and also change it’s color to black and not bold font.

I can see that it’s happening because of the following label property of css:

label {
    display: block;
    padding-bottom: .25rem;
    color: #022851;
    font-weight: 700;
}

And once I remove display:block is starts showing like the second image but I don’t want to modify this css since it’s used at other places as well. How can I override it to achieve desired results?

[Archibald]

Add this to the end of your CSS to select label elements that are descendants of elements that have class ‘jsfiddleTests’:

.jsfiddleTests label{
  display: inline;
}