[FIXED] What is the correct code for label placement above an input?

Issue

What is the proper code required to make the label "Custom Name" appear above the input field instead of beside it (See image below for how it currently looks). I'm guessing it's in the style code at the bottom but not sure what it needs to be to do so. Any help would be appreciated!

<p class="line-item-property__field">
<label  for="">Custom Name</label>
<input required id="monogram" style="width:200px; max-width:100%;" type="text" name="properties[Monogram]">
</p>

<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>

Image for reference

Solution

Use flexbox.

.line-item-property__field {
  display: flex;
  flex-direction: column;
}

.ep_inline_block {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

.ep_block {
  display: block;
  margin-top: 10px;
  margin-bottom: 2px;
}

input {
  width: 200px;
  max-width: 100%;
}

<p class="line-item-property__field">
  <label for="monogram">Custom Name</label>
  <input required id="monogram" type="text" name="properties[Monogram]">
</p>

Answered By - Prosy Arceno

Answer Checked By - Candace Johnson (PHPFixing Volunteer)