How can I combine all elements of a div into a static image before printing?

I've inherited a project so there's a lot of javascript and jquery going on that I don't understand the original intent, so please bear with me with any followup questions.

I have a tool where you can replace the image on a card with any other image you want (via cropper). Once everything is sized and positioned as you see fit, upon clicking print, all elements shift back to whatever things look like without custom styles. Here's what the original developer had to accomplish this:

    var frontPosition, backPosition;

    window.onbeforeprint = function(event){
      
      frontPosition = $(initial_image_front).position();
      backPosition = $(initial_image_back).position();

      if ( frontPosition.top > 0 ) {
        $(initial_image_front).css({ top: frontPosition.top * 0.470588235 });
      }
      if ( frontPosition.top < 0 ) {
        $(initial_image_front).css({ top: (-Math.abs(frontPosition.top) * 0.366863905) });
      }
      if ( frontPosition.left !== 0 ) {
        $(initial_image_front).css({ left: 0 });
      }

      if ( backPosition.top > 0 ) {
        $(initial_image_back).css({ top: backPosition.top * 0.470588235 });
      }
      if ( backPosition.top < 0 ) {
        $(initial_image_back).css({ top: (-Math.abs(backPosition.top) * 0.366863905) });
      }
      if ( backPosition.left !== 0 ) {
        $(initial_image_back).css({ left: backPosition.left * 0.59 });
      }

    };

    window.onafterprint = function(event){
      
      $(initial_image_front).css({ top: frontPosition.top, left: frontPosition.left });
      $(initial_image_back).css({ top: backPosition.top, left: backPosition.left });

    };

And here is the corresponding html:

<div>
  <div class="flex justify-center mb-2 print-hidden">
    <p class="font-head text-white opacity-50">FRONT</p>
  </div>
  <div class="card front flex flex-col mx-auto" style="width: 575px; height: 408px;">
    <%= render 'card_head' %>
    <div class="flex w-7/12 pl-4 pt-3 pb-6 print:pl-2 print:pt-0 print:pb-3 flex-grow flex-wrap items-center justify-center">
      <%# other stuff %>
    </div>
    <%= image_tag "laurie.png", style: "left: 267px; top: 0;", class: "card__image absolute z-0", id: "initial_image_front" %>
  </div>
  <div class="flex justify-between mb-2 mt-2 print-hidden">
    <%# other stuff %>
    <%= form_for(Card.new, remote: true, url: save_photo_path) do |f| %>
      <label>
        <p class="font-head text-white opacity-80 hover:opacity-100 hover:text-red cursor-pointer" id="change_front">Change Photo</p>
        <%= f.file_field :photo, class: "hidden input_front" %>
      </label>
      <div class="hidden">
        <%= f.submit %>
      </div>
    <% end %>
  </div>
</div>

And here's the before and after:

What I'm assuming is happening is all the divs are being organized on top of one another but I want to keep the styles that we had before submitting the form. I'd like to just nix all the window.onbeforeprint and window.onafterprint but I still get the same result, which is why I think the original developer made this mess lol. Is there a simpler way to achieve printing my image than adjusting all the css after it's already been adjusted??

It's using tailwind, but obviously there are a lot of styles that seem to be overkill, both inline and in an imported stylesheet. I'll address that some other time, unless it's super important in regards to resolving my issue.

Edit: to add what I've tried. I've followed quite a few s/o answers (e.g. window.print() CSS not loaded in print preview) that make sure to import my stylesheets directly into the print window first. While it does import those stylesheets, the styles are still wildly incorrect.

Thanks to a friend, it was a very simple solution:

<%= image_tag "laurie.png", style: "width: 307px; height: 409px; right:0; top: 0;", class: "card__image absolute z-0", id: "initial_image_front" %>

Just had to add right: 0 to this element. Eventually I'd like to go back and simplify all these extra styles but there's not enough time for that right now.