Button text to wrap like inline spans

Question

Is it possible to wrap button text next to a span? So that the button appears over multiple lines.

E.g:

div {
  background-color: #ccc;
  padding: 10px;
  width: 150px;
}

button {
  border: 0;
  background: transparent;
}

<div>
  <span>Lorem ipsum dolor sit amet </span><button>Button with a long label</button>
</div>

In the case above the button text should continue as though it were part of the text, similar to a link.

Answer 1

display:contents; can do this but you may lose more than what you will win (it can break the accessibility as well)

div {
  background-color: #ccc;
  padding: 10px;
  width: 150px;
}

button {
  border: 0;
  background: transparent;
  display:contents;
}

<div>
  <span>Lorem ipsum dolor sit amet </span><button><span>Button with a long label</span></button>
</div>