JSFiddle - React, Tailwind, and code Playground

HTML

Vertical alignment OK / Horizontal not OK
<div id="block1">
    <h1>What a great title</h1><button>jhg</button>
    </button><a href="javascript:void(0)">This link can kill you</a><a href="javascript:void(0)">Click if you dare</a>
</div>

Vertical alignment not OK / Horizontal OK
<div id="block2">
    <h1>What a great title</h1><a href="javascript:void(0)">This link can kill you</a><a href="javascript:void(0)">Click if you dare</a>
</div>

Vertical alignment OK / Horizontal OK
<div id="block3">
    <h1>What a great title</h1><a href="javascript:void(0)">This link can kill you</a><a href="javascript:void(0)">Click if you dare</a>
</div>

CSS

div {    
    margin-bottom: 12px;
    padding: 4px;
    background-color: #DDD;
}

h1 {
    display: inline-block; font-size: 2em; font-weight: bold;
}

a {
    margin: 0 4px; padding: 2px; background-color: #9CF;
}

#block1 a {
    display: inline-block;
}

#block2 a {
    display: block;
    float: right;    
}

#block3 {
  display: table;
  width: 100%;
  box-sizing: border-box;
}

#block3 > * {
  display: table-cell;
}

#block3 > *:last-child {
  text-align: right;  
}