<h3>One does not simply <code>display: inline;</code> to button</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut quam elit. Nulla facilisi. Aliquam auctor vehicula dolor quis accumsan. <a href="#meh"><button>Phasellus tristique dui augue, at rutrum libero sagittis eget. Phasellus odio orci, placerat non sem ac, lacinia tincidunt sapien. <strong>(Should not wrap like this.)</strong></button></a> Curabitur at convallis orci. Mauris ac congue neque, vel tincidunt neque.</p>

<p>Pellentesque rutrum arcu at est cursus, vel dictum quam pharetra. Suspendisse a nunc eu risus fermentum blandit vitae at dui. Suspendisse finibus felis ac consectetur tristique. Curabitur ornare, sem nec accumsan rhoncus, ligula libero rutrum felis, a sollicitudin ante massa in tortor. Cras sed nisl scelerisque, imperdiet dui nec, iaculis lectus. Nullam dapibus posuere justo quis tincidunt. <a href="#meh">Nam vel quam ut risus porttitor consectetur ut eu dolor. Curabitur quis est vel ipsum suscipit feugiat eu porttitor ligula. Quisque consectetur congue lacinia. <strong>(Should wrap like this!)</strong></a> Suspendisse quis dui imperdiet, facilisis ligula sit amet, auctor quam. Aliquam gravida feugiat lectus non egestas. Sed luctus sem a tincidunt auctor. Sed eget ullamcorper massa, nec dapibus quam. Sed ut pellentesque ipsum, sed mollis leo. Aliquam quis maximus quam. Nulla semper tortor sit amet iaculis tempus.</p>

body { margin: auto; width: clamp(10rem, 50vw, 40rem); }
// use `<a href>` as parent to inherit all native styles
a > button { all: inherit; }
// you can keep throwing `display: inline !important;` all you want, it will not help you

document.querySelectorAll('a').forEach(element => {
    element.onclick = (event) => event.preventDefault()
})