JSFiddle - React, Tailwind, and code Playground

by Patrick Ludewig

HTML

<link rel="stylesheet" href="https://farmersfootprint.us/wp-content/themes/Divi/style-static.min.css?ver=4.21.1" type="text/css">
<div
  class="et_pb_row et_pb_row_0 et_pb_equal_columns et_pb_gutters1"
>
  <div
    class="et_pb_column et_pb_column_1_2 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough"
  >
    <div
      class="et_pb_module et_pb_image et_pb_image_0 object-cover"
      
    >
      <span
        class="et_pb_image_wrap"
      
        ><img
          decoding="async"
          width="2039"
          height="2560"
          src="https://farmersfootprint.us/wp-content/uploads/2025/05/nana-pan-fried-squash-large-scaled.webp"
          alt=""
          title="nana-pan-fried-squash-large"
          srcset="
            https://farmersfootprint.us/wp-content/uploads/2025/05/nana-pan-fried-squash-large-scaled.webp    2039w,
            https://farmersfootprint.us/wp-content/uploads/2025/05/nana-pan-fried-squash-large-1280x1607.webp 1280w,
            https://farmersfootprint.us/wp-content/uploads/2025/05/nana-pan-fried-squash-large-980x1230.webp   980w,
            https://farmersfootprint.us/wp-content/uploads/2025/05/nana-pan-fried-squash-large-480x603.webp    480w
          "
          sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 2039px, 100vw"
          class="wp-image-263626"
      /></span>
    </div>
  </div>
  <div
    class="et_pb_column et_pb_column_1_2 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child"
  >
    <div
      class="et_pb_button_module_wrapper et_pb_button_0_wrapper et_pb_button_alignment_left et_pb_module et_had_animation"
      style=""
    >
      <a
        class="et_pb_button et_pb_button_0 et_pb_bg_layout_dark"
        href="https://farmersfootprint.us/nana/"
        data-icon="#"
        >Back to the Kitchen</a
      >
    </div>
   ...

CSS

.et_pb_row {
  display: flex;
}
.object-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.object-cover span {
  display: block;
}
.et_pb_image {
  position: sticky;
  top: 0;
}
.et_pb_column_1_2 {
  width: 50%;
}
.et_pb_image_wrap {
  width: 100%;
  overflow: hidden;
}