JSFiddle - React, Tailwind, and code Playground

HTML

<div class="category-recipes">
      <div class="otherdiv">other div</div>
      <div class="otherdiv">other div 2</div>
      <div class="header">HEADER</div>
    <p>Why is there 40px gap above me?</p>
</div>

CSS

.otherdiv, .header, p {
    border: 1px solid #000;
    padding: 5px;
}

JavaScript

var el = document.getElementsByClassName('header')[0];
// first check if the parent node has class with text recipes
if(el.parentNode.classList.toString().match(/recipes/)) {
    //get the first child with class header and then style it
    el.style.marginBottom = "40px"; 
}