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

user_15937566 0
Viewed 33

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

shopify liquid css html
1 Answers

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>

user_124152870
Related