Arrange achor buttons in coulmn when resposive but display inline property is already applied on full sized screen

Question

When the button active is clicked it is replaced by deactive button and vice versa this is going all good in size greater than 768px but when the screen size is smaller than 768px the button active is not replaced by deactive button rather the two-button appears at a different position in toggling on the small screen I think changes should be in display property when the screen is <=768px that it adjust it in a way that in toggling the button replaces each other in exactly the same position as it is working on big screen.

My code:

document.querySelectorAll('.activeBtn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    this.closest('tr').classList.remove('active');
  });
});

document.querySelectorAll('.deactiveBtn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    this.closest('tr').classList.add('active');
  });
});

tr a.activeBtn {
  display: none;
}

tr a.deactiveBtn {
  display: inline;
}

tr.active a.activeBtn {
  display: inline;
}

tr.active a.deactiveBtn {
  display: none;
}

<div class="detailsCategory">
  <div class="recentCategory">
    <div class="card-header">
      <h2>Categories </h2>
      <a href="#" class="catBtn">Add Categories</a>
    </div>
    <table>
      <thead>
        <tr>
          <td class="serial">#</td>
          <td>ID</td>
          <td>Categories</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td class="serial">1</td>
          <td>4202211</td>
          <td>Men</td>
          <td class="statusButtons">
            <span><a href="#" class='status activeBtn' >Active</a></span>&nbsp;
            <span><a href="#" class='status deactiveBtn'>Deactive</a></span>&nbsp;
            <span><a href="#" class='status editBtn'>Edit</a></span>&nbsp;
            <span><a href="#" class='status deleteBtn'>Delete</a></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

You have protected spaces   after each span and therefor the line isn't empty and therefor isn't hidden. To prevent the issue you have to omit these. You could instead define a margin for the spans:

.statusButtons span {
  margin-right: 3px;
}

Working example:

document.querySelectorAll('.activeBtn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    this.closest('tr').classList.remove('active');
  });
});

document.querySelectorAll('.deactiveBtn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    this.closest('tr').classList.add('active');
  });
});

tr a.activeBtn {
  display: none;
}

tr a.deactiveBtn {
  display: inline;
}

tr.active a.activeBtn {
  display: inline;
}

tr.active a.deactiveBtn {
  display: none;
}

.statusButtons span {
  margin-right: 3px;
}

<div class="detailsCategory">
  <div class="recentCategory">
    <div class="card-header">
      <h2>Categories </h2>
      <a href="#" class="catBtn">Add Categories</a>
    </div>
    <table>
      <thead>
        <tr>
          <td class="serial">#</td>
          <td>ID</td>
          <td>Categories</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td class="serial">1</td>
          <td>4202211</td>
          <td>Men</td>
          <td class="statusButtons">
            <span><a href="#" class='status activeBtn' >Active</a></span>
            <span><a href="#" class='status deactiveBtn'>Deactive</a></span>
            <span><a href="#" class='status editBtn'>Edit</a></span>
            <span><a href="#" class='status deleteBtn'>Delete</a></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>