JSFiddle - React, Tailwind, and code Playground

HTML

<p>обычное расстояние</p>
<div class="block block-1">

  <span class="big">lorem</span>
  <span class="small">lorem</span>

</div>
<p>большое расстояние</p>
<div class="block block-2">

  <span class="big">lorem</span>
  <span class="small">lorem</span>

</div>
<p>крошечное расстояние</p>
<div class="block block-3">

  <span class="big">lorem</span>
  <span class="small">lorem</span>

</div>
<p>вообще наползлО</p>
<div class="block block-4">

  <span class="big">lorem</span>
  <span class="small">lorem</span>

</div>

SCSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.block {
  background: #eee;
  margin-bottom: 20px;
}
.big {
  display: block;
  font-size: 20px;
}
.small {
  display: block;
  font-size: 12px;
}
.block-2 {
  .small {
    margin-top: 40px;
  }
}
.block-3 {
  .small {
    margin-top: -6px;
  }
}
.block-4 {
  .small {
    margin-top: -16px;
    color: red;
  }
}