JSFiddle - React, Tailwind, and code Playground

HTML

<h4>これがダメ</h4>
<div id="dame">
<div class="damedayo" onclick="setPadding('100px');">
<div class="btn_dame">クリックでpadding-bottom変更(10px→100px)</div>
</div>
</div>

<h4>これはOK</h4>
<div id="ok">
<div class="okdayo" onclick="setPosition('relative');">
<div class="btn_ok">クリックでposition変更(absolute→relative)</div>
</div>
</div>

<script>
function setPosition( $position ) {
 var $elementReference = document.getElementById( "ok" );
 $elementReference.style.position = $position;
}
</script>

<script>
function setPadding( $padding-bottom ) {
 var $elementReference = document.getElementById( "dame" );
 $elementReference.style.padding-bottom = $padding-bottom;
}
</script>

CSS

/* これがダメ */
#dame {
  padding-bottom: 10px;
}

/* これはOK */
#ok {
  position: absolute;
}




/* デザイン（関係なし） */
h4 {
  margin-bottom: 0;
}
.btn_dame{
  background: #65afff;
  width: 100vw;  
}
.btn_ok{
  background: #FF6565;
  width: 100vw;
}