theming – CSS styling breaks field hide mechanism

I have some jquery set up to hide a radio list field when the user clicks on an adjacent field. I’m trying to style the radio list to display horizontally, but it breaks the jquery. I believe this happens because I am declaring the display value for the radio list in CSS, which overrides the hide function in the code.

The jquery looks like this:

      // apply event handler to radio inputs
      $('.main-field input').change(function(){
        // if 1 or more YES selections are found
        if($('.main-field input:checked').length > 0){
          // hide submit button
          $('.radio-list-field').hide();
        }
        // otherwise
        else{
          // show submit button
          $('.radio-list-field').show();
        }
      });
 });
})(jQuery);

The css portion to style the radio list currently includes this:

.radio-list-item-wrapper {
    display: inline;
    margin: 10px 1em;
    padding: 0;
    list-style: none;
    position: relative;
}

I have tried using flex instead of inline, but that doesn’t work either. None of the other attributes affect functionality.

Is there a way to display a radio list horizontally without declaring the display: inline/flex attribute, or perhaps a different approach that gets me the display I want without breaking the jquery code?

This is for a Drupal 7 site.