<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Custom Layout</title>
</head>
<body>
<div className="App" style="max-width: 150px; border: 1px solid red;">
<div style="display: flex; flex-wrap: wrap;">
<p style="text-align: left; margin: 0;">
This is an example of a dynamic paragraph
</p>
<button>Submit</button>
</div>
</div>
</body>
</html>The text within the paragraph changes dynamically. If the text is short, both the text and button will appear on the same line as desired. However, if the text is long, the flex wrapping function may move the button to a new line even if there is space available on the current line.
I prefer that the button remains on the same line as the text if there is enough space. Only when no space is available should it be moved to a separate line for better layout.