Add Print Media Query via JavaScript

I am currently trying to print a page that contains checklists & each list has a small textarea below it. When it's printed only the items that are checked are displayed, causing the checklists to vary in height. I want to make all the checklists the same height, so the textarea below each one are lined up.

Currently, I am using JS to loop through these checklist to get the tallest one so I can set the height for print. I tried to toggle a class with the height desired for print, but that of course affects the main page (I could toggle back after a second, BUT the rule didn't seem to apply on print so I canned it). I found this article by David Walsh, which has a section on inserting rules for media queries I attempted. This is the closest I have gotten to what I'm trying to achieve BUT it doesn't seem to apply on print (I updated this same code to not utilize a media query & it worked, so I think my "newHeight" variable is ok).

$.each(document.styleSheets, function(counter, styleSheet) {
  if(styleSheet.href && styleSheet.href.endsWith('my_specified_sheet.css')) {
    $.each(styleSheet.rules, function(_counter, rule) {
      if(rule && rule.conditionText === "print") {
        var newHeight = tallestSelectedItemsHeight + "px!important";
        styleSheet.insertRule("@media print{ .print-height { height: " + newHeight + "; } }");
      }
    })
  }
});