Bootstrap 4 text wrapping for containers - css

Question

I am trying to get title text to wrap around a span object so far I have managed to get it to line up where I want everything but I just can't get the final part (the wrapping) to obey...I suspect it has something to do with the way that the text is in a different container but if I remove the container it upsets the rest of the formatting,
<div class="row px-3">
<div class="jumbotron">
<span class="float-right d-flex ">
<div class="align-self-center mr-1">Submitted by</div>
<div class="btn-group">
<button class="btn">User</button>
<button class="btn btn-info"></button>
<button class="btn btn-danger"></button>
</div>
</span>
<h1 class="d-flex">
<div id="title">A very long post title that needs to be long enough to see if the wrapping is working or not</div>
</h1>
<div id="body">a short body underneath the title</div>
</div>
</div>
JSFiddle of example code
As the title suggests I am using bootstrap 4. Any advice would be greatly appreciated...

Answer 1

I got your issue, basically, your usage of tags is not proper.
Element div not allowed as child of element span/h1 in this context.
Check the fiddle link out, it solves your problem. Fiddle
<div class="row px-3">
<div class="jumbotron">
<div class="float-right">
<div class="">Submitted by
</div>
<div class="btn-group">
<button class="btn">User</button>
<button class="btn btn-info"></button>
<button class="btn btn-danger"></button>
</div>
</div>
<p id="editor-title">A very long post title that needs to be long enough to see if the wrapping is working or not sdjfs dakjsd askjdhas dkjashd asdjkhasd askjdhas dasjdasdkjasd asdkjhasd djkf dfuieywrbewrgew weruwe</p>
<div id="editor-body">a short body underneath the title</div>
</div>
</div>
I would advise you to use W3C HTML checker.