JSFiddle - React, Tailwind, and code Playground

by GlauberRocha

HTML

Vertical alignment OK / Horizontal not OK
<div id="block1">
    <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 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>

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;    
}