I created a popup for a Chrome extension. This is the popup source code:
<form>
<label for="email">Email</label>
<input type="email" id="email">
<input type="submit">
<p>Hello, world! This is a paragraph. And this is some text.</p>
</form>
This is how it looks:
And this is how it should look:
As you see, the elements aren’t in the right position.
I don’t know anything about chrome extensions but it looks to me as though you have no width for the items to line up horizontally.
Try setting a css width (not in percentages) for the form thats long enough to hold those items horizontally.
Would it be OK to use max-content? I just tried the following and it seems to work:
form {width: max-content;}
Yes that should be ok as long as you don’t have a long line of text that pushes it very wide.
In my case, min-width seems to have the same effect:
form {min-width: max-content;}
Any preference?
You would need to ensure that the min-width you supply is wide enough for the label the input and the button. All of which will have different widths depending on browser and operating system and users text size settings.
You’d need to explicitly size each of those to be sure they fit within your min-width. In effect your min-width is no different to width as the window will stop it getting larger anyway. It’s just the same as using width in this case.
max-content on the other hand will lay the items out and allow them to take all the width they need. However as I said a line of text will just stretch on forever so you may want to set the max-content on an element that just holds the label, input and button. Let the text run free and it will match the width of the above.
Maybe wrap the form elements in a fieldset and apply a max-content to that instead.
e.g.
As always, you are knowledgeable, creative and helpful! I wish you a wonderful new year and hope it brings you many blessings. 
