html - CSS Button Multiline in paragraph like an anchor tag (IE11 also)

Question

EDIT: @Dinesh karthik solution work well but sadly not on IE11. I try to make it work also in IE11

How to display a button like an anchor tag in a paragraphe.

I mean allow a button to have a line break and have the same behaviour than an anchor tag

button{
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    display: inline;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    color: inherit;
    white-space: normal;
}
.demo{
  width: 150px;
  background: #ccc;
}

a, button{
  text-decoration: underline;
}

<h3>With a button</h3>
<p class="demo">
Hello world <button>find more information here</button> and keep calm
</p>

<h3>With an anchor</h3>
<p class="demo">
Hello world <a>find more information here</a> and keep calm
</p>

question from:https://stackoverflow.com/questions/65940420/css-button-multiline-in-paragraph-like-an-anchor-tag-ie11-also

Answer 1

change display css in button from display:inherit to display:contents

button{
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    display: contents;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    color: inherit;
    white-space: normal;
}
.demo{
  width: 150px;
  background: #ccc;
}

a, button{
  text-decoration: underline;
}

<h3>With a button</h3>
<p class="demo">
Hello world <button>find more information here</button> and keep calm
</p>

<h3>With an anchor</h3>
<p class="demo">
Hello world <a>find more information here</a> and keep calm
</p>