Уменьшение расстояния между блоками HTML

У меня есть такой блок кода - чекбокс, при нажатии которого, открывается поле с лэйблом и полем для ввода.. Однако у меня получается очень большой зазор между чекбоксом и появляющимся блоком..я пытался использовать padding и margin - (pt-0, mt-0 и тд), но не помогает

как это можно исправить?

<div class="form-group">
     <p><input type="checkbox" name="epic" id="epic_checkbox" onclick="checkBox()">Epic</p>
     
    <div class="form-group mt-0 pt-0" id="epic_ll" style="display:none">
         <label class="form-control-label" for="epic_key">Epic key</label>
         <input type="text" id="epic_key" class="form-control form-control-alternative"
                                   placeholder="Key">
    </div>
</div>

JS код для чекбокса

function checkBox() {
  // Get the checkbox
  var checkBox = document.getElementById("epic_checkbox");
  // Get the output text
  var text = document.getElementById("epic_ll");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}