Side by side elements with one being HTML / Liquid and the other being text

[michaelhixson1]

Instead of the typical 'Image with Text Block' where you have an uploaded image on the left or right with custom title and text on the other side, I want the Image with Text Block to be an HTML/Liquid block for a custom graphic on either side and the normal title and text on the others side. So it would be like image below with HTML on the left and Text on the right. In mobile view the HTML would stack above the text.

[ZubayerShopidev]

<div class="image-text-block">
  <div class="html-side">
    {% if section.settings.custom_image %}
      <img src="{{ section.settings.custom_image | img_url: 'large' }}" alt="{{ section.settings.custom_image.alt }}">
    {% else %}
      <p>No image available.</p>
    {% endif %}
  </div>
  <div class="text-side">
    <h2>{{ section.settings.title }}</h2>
    <p>{{ section.settings.description }}</p>
    <a href="{{ section.settings.button_link }}" class="button">{{ section.settings.button_text }}</a>
  </div>
</div>

<style>
  .image-text-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .html-side, .text-side {
    flex: 1;
    padding: 10px;
  }

  .html-side img {
    max-width: 100%;
    height: auto;
  }

  @media (max-width: 768px) {
    .image-text-block {
      flex-direction: column;
    }

    .html-side, .text-side {
      width: 100%;
      text-align: center;
    }
  }
</style>

{% schema %}
{
  "name": "Custom Image with Text",
  "settings": [
    {
      "type": "image_picker",
      "id": "custom_image",
      "label": "Custom Image"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "PRE-ORDER"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description",
      "default": "Pre-ordering"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "PRE-ORDER NOW"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    }
  ],
  "presets": [
    {
      "name": "Custom Image with Text",
      "category": "Custom"
    }
  ]
}
{% endschema %}

Add the Code

• Log in to your Shopify Admin.
• Go to Online Store > Themes.
• Click on Theme Customize.
• Click on Edit Code (from the "Actions" button on the right side).
• In the Sections folder, create a new file. Name it custom-image-text.liquid.
• Paste the following code into this file:

[michaelhixson1]

That does not work right. It should be an HTML field on the left not an Image.

[michaelhixson1]

no reply here