Adding custom HTML code to product page

[landinberryman]

I added custom code to my debut theme. I added a text box and drop down box for customer to input for custom product. For some reason, my boxes are showing up at the bottom left of my website and not above the add to cart button. Here is my custom coding:

{% comment %}

  The contents of the product.liquid template can be found in /sections/product-template.liquid

{% endcomment %}

{% section 'product-template' %}

{% if template contains 'custom-1' %}

      <p class="line-item-property__field">

      <label for="Who do you want to rep?">Who do you want to rep? </label>

      <input required id="Text" style="width:120px; max-width:100%;" type="text" name="properties[Monogram]">

      </p>

      <p class="line-item-property__field">

      <label class="ep_block">Choose a color</label>

      <select required id="choose-a-color" name="properties[Choose a color]">

      <option value="Navy">Navy</option>

      <option value="Maroon">Maroon</option>

      <option value="Purple">Purple</option>

      <option value="Black">Black</option>

      </select>

      </p>

<style>

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

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

</style>

{% endif %}

<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "{{ product.title | escape }}",

It continues on to more coding for other aspects of the page. I have the landing page set to unavailable, while I am working on the coding, so don't mind that part in the code. I thought because the coding was before the add to cart, it would show up above the add to cart button. Here is what my site looks like:

I would like the green box to be where the red box is.

THANK YOU!!!!

[SohelRana]

Hello, can you give me the URL of your store? So I can check and give you the proper coding suggestion. Best of Luck!

[landinberryman]

https://fangirlclothing.com/

Should I take that product off of unavailable so you can see it? Only certain products will be customizable

[SohelRana]

Give me the product link where I can see your issue! 

[landinberryman]

https://nf7q3ye4lpmx0gwt-1744765039.shopifypreview.com/products_preview?preview_key=1423fb7f02a52690...

[Perennial]

Link not Working 

Resend a link.

[landinberryman]

https://fangirlclothing.com/products/notch-neck-crop-in-white

[SohelRana]

This is a CSS issue, I have to check your theme files to fix this.

[landinberryman]

How would you do that?

[Perennial]

hi,landinberryman,

Hope you are doing well.

We have gone through your requirements and we would love to help you.

plz put this code below <form> tag

<p class="line-item-property__field">
<label for="Who do you want to rep?">Who do you want to rep? </label>
<input required="" id="Text" style="width:120px; max-width:100%;" type="text" name="properties[Monogram]">
</p>
<p class="line-item-property__field">
<label class="ep_block">Choose a color</label>
<select required="" id="choose-a-color" name="properties[Choose a color]">
<option value="Navy">Navy</option>
<option value="Maroon">Maroon</option>
<option value="Purple">Purple</option>
<option value="Black">Black</option>
</select>
</p>