html id and class for js and css in same component not working

I am enabling and disabling a div by checking two radio button (yes and no) but I am facing an issue when I am putting both id and class in same div and when I am using two div (one for id as parent and another for class as child) then its working fine.

function check1() {
  if (document.getElementById("isOutsourcing_yes").checked) {
    document.getElementById("s1").hidden = false;
  }
  if (document.getElementById("isOutsourcing_no").checked) {
    document.getElementById("s1").hidden = true;
  }
}
.padd_left {
  display: inline-block;
  padding-left: 40px;
}
<input type="radio" name="isOutsourcing" id="isOutsourcing_yes" onchange="check1()" checked> Yes
<input type="radio" name="isOutsourcing" id="isOutsourcing_no" onchange="check1()"> No
    
<div id="s1" class="padd_left">
    <h1>Hello..</h1>
</div>

above code is not working but when I am replacing last div as below then it’s working fine

<div  class="padd_left">
    <div id="s1">
        <h1>Hello..</h1>
    </div>
</div>


Inline blocks aren’t a big fan of hidden. Try this instead

document.getElementById("s1").style.visibility = "hidden"; // or visible

Also note the difference between the display property and the visibility property. You could set it to display: none if you wanted it to completely disappear from the page without a trace (besides in the source). visibility: hidden will have it take up the same space but not render anything. Depending on how you want your page to look, you’ll have to make that decision.

https://www.w3schools.com/jsref/prop_style_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Here is the more simple solution using only pure CSS and HTML, without javascript