How to make two words come in single line - html

Question

<div>Mandatory Documents</div>
<div>
<button type="text" (click)="delete()" pButton icon="pi pi-times" label="Delete">
</button>
</div>
I have two div tags. The word Mandatory Documents is coming in two lines. I need the whole word to come in only one line and the Delete button beside to it
What CSS should I apply?

Answer 1

you just need to use "display: inline-block" by default div elements are block. or you could also span i guess which are inline by default. I dont know why you say don't break the two words? anyway you could add between the words so it wouldnt break
<div style="display:inline-block">Mandatory Documents</div>
<div style="display:inline-block">
<button type="text" (click)="delete()" pButton icon="pi pi-times" label="Delete">test</button>
</div>
I just don't understand why it would split up the words? can you provide a screen shot if it doesnt work just to show the full layout?

Answer 2

Use a non-breakable space between your words:
To keep the two div on the same line, use display: flex on their parent with flex-direction: row. Here is an example with a parent container which is too small yet the children are correctly placed on the same row.
.group {
display: flex;
flex-direction: row;
border: 1px solid black;
max-width: 100px;
}
.group > div {
border: 1px solid green;
margin: 2px;
}
<div class="group">
<div>Mandatory Documents</div>
<div><button>Button</button></div>
</div>
<br>
<div class="group">
<div>Mandatory Documents</div>
<div><button>Button</button></div>
</div>