JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inlineblock">
  Margins do not collide, see https://css-tricks.com/what-you-should-know-about-collapsing-margins/
</div>
<div class="inlineblock">
  Margins do not collide, see https://css-tricks.com/what-you-should-know-about-collapsing-margins/
</div>

<div class="block">
Margins do collide  
</div>
<div class="block">
Margins do collide
</div>

<div class="width_auto_do_not_work">
  <table>
    <tr>
      <td>width: auto</td>
      <td>- Doesn't work when having tables inside</td>
    </tr>
  </table>
</div>

<div class="width_fit_content_do_not_work_ie_and_edge_detection_is_a_problem">
  <table>
    <tr>
      <td>fit-content has browser support 72%</td>
      <td>- as of December 2015</td>
    </tr>
  </table>
</div>

Note:
My problem is that I want margins collide to look consistent, it's ugly when mixing display: block and display:inline-block elements

CSS

.inlineblock {
  display: inline-block; 
  margin: 5px 5px 5px 5px;
  background-color: #aa3;
}

.block {
  display: block; 
  margin: 5px 5px 5px 5px;
  background-color: #3aa;
}

.width_auto_do_not_work {
  display: inline-block; 
  margin: 5px 5px 5px 5px;
  background-color: #3aa;
  width: auto;
}

.width_fit_content_do_not_work_ie_and_edge_detection_is_a_problem {
  display: block; 
  margin: 5px 5px 5px 5px;
  background-color: #3aa;
  width: fit-content;
}