I am creating a small example using Grid with Template areas,
I want the items to take its own height as per content in different columns, but first heading div taking the equal height as per its sibling in next div.
As shown in the picture I want this red marked cross area to go away, which means div with class "single-title", to take its content height and not this extra white space.
is it possible without changing the HTML.
.single-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 60% 40%;
grid-template-columns: 60% 40%;
-ms-grid-rows: auto auto auto 1fr;
grid-template-areas:
"singleTitle singleIntro"
"singleImage singleSidebar"
"singleContent 0";
grid-auto-rows: fit-content(1px);
}
.a {height: 100%;}
.wp-block-ws-form {height: 500px; background: #ddd;}<div class="wp-block single-grid">
<div class="single-title" style="
grid-area: singleTitle;
">
<span class="single-topic">Workforce Management</span>
<h1>This heading can be anything This heading can be anything</h1>
<p class="sub_headline"></p>
<p class="post-info">Last Updated: December 18, 2020 | Read Time: 8 min</p>
</div>
<div class="single-image" style="
grid-area: singleImage;
">
<div class="a" data-src="https://paycor2.wpengine.com/wp-content/uploads/2021/02/Employee-Vaccination-Policy-Template-header.png" style="background-image: url("https://paycor2.wpengine.com/wp-content/uploads/2021/02/Employee-Vaccination-Policy-Template-header.png");"></div>
</div>
<div class="single-intro" style="
grid-area: singleIntro;
">
<div class="wp-block-ws-card card has-text-color has-white-color has-background">
<div class="block-background has-background-color has-orange-background-color">
</div>
<div class="card-body">
<h3 class="has-text-align-center"><strong>This could be anything again, bla bla bla</strong></h3>
<div class="wp-block-ws-form">
dynamic Form will go here with nay height, right now height is set to 500px
</div>
</div>
</div>
<hr class="wp-block-separator">
</div>
<main class="single-content" style="
grid-area: singleContent;
">
<p><b>UPDATE DECEMBER 18</b>: This article has been updated in accordance with the latest <a href="">EEOC guidance</a>.</p>
<p>Employers have a responsibility for the health and safety of their employees, but is it their place to enforce mandatory vaccinations? And is that even legal? Every year, employers ask these very questions and the stakes couldn’t be higher. Usually, the answer is “it depends”, but pandemics are different. Safe and effective vaccines against COVID-19 have arrived and <b>the EEOC have confirmed that employers can make vaccination against COVID-19 mandatory for employees, with some restrictions</b>.</p>
<p>Now is the time to think about creating an employee vaccination policy—here’s everything you need to know.</p>
<h2><b>Can Employers Make a COVID Vaccine Mandatory?</b></h2>
<p>Vaccines protecting people against COVID-19 have been developed with record breaking speed and the rollout, starting with society’s most vulnerable, has already begun. We’re not out of the woods yet, but now’s the time for employers to start thinking how a safe return to the workplace could look. Vaccines have a big part to play, but will only be really transformative if enough people receive them (at least 75%, according <a href="">Anthony Fauci</a>). Can employers enforce this?</p>
<p>The word from the EEOC has arrived: employers can make proof of vaccination against COVID-19 mandatory for employees. However, this isn’t a free pass for employers—there are important compliance watchouts each step along the way. It might still be the case that encouraging, rather than mandating, vaccine use is the better path for your organization.</p>
<h2><b>Employee Flu Vaccination Policies</b></h2>
<p>We know COVID-19 is undoubtedly a more dangerous virus than flu, but it’s helpful to consider how the law deals with employee vaccination policies regarding yearly flu shots. In general, it is permissible to mandate that employees take a flu vaccine—but there are many notable exceptions.</p>
<p>For at-will employees, making flu shots mandatory requires only a sufficient business reason, like if your employees regularly deal with the sick or the elderly, who are especially vulnerable. However, this doesn’t mean that all employees have to take the vaccine.</p>
<p>Two common exceptions—identified by the EEOC—are that employees may have a religious objection to vaccines or, under the Americans With Disabilities Act, a qualifying disability (like those listed by the CDC) which puts them at increased risk of side effects when receiving vaccinations.</p>
<p>In industries where employees are not regularly in contact with vulnerable populations, proving a sufficient business reason to mandate vaccines is considerably harder. However, while this is true for flu, COVID-19 poses a “direct threat” to all, significantly altering the legal dynamics.</p>
<p>It remains true, though, that objections to vaccinations should be considered on an individual basis and employers should bear in mind that while they may have strong arguments on their side, any sense that vaccines are being forced on unwilling employees could harm company morale. It may be easier to offer an accommodation—such as remote work—rather than forcing the issue. Be sure to document all objections and subsequent accommodations, in order to prove that you followed due process.</p>
<h2><b>What if Employees Refuse to Get Vaccinated?</b></h2>
<p>In their <a href="">guidance updated December 16</a>, the EEOC clarified that the COVID-19 vaccination would not be treated as a medical examination, and so it can be required as a condition of entering the workplace.</p>
<ul>
<li>If an employee seeks an exception due to disability, under ADA employers are required to seek reasonable accommodation (such as <a href="">remote work</a>). However, if this is not possible, employers may exclude the employee from the workplace if it can be proved they pose a “direct threat” (see the EEOC guidance for an in-depth look at exact what counts).</li>
<li>If an employee seeks an exception due to religious belief or practice, Title VII legislation requires that employers look to offer reasonable accommodation, although in this case only if doing so won’t cause ‘undue hardship’. If this isn’t possible, an employee may be excluded from the workplace. (But watch out: excluded from the workplace doesn’t necessarily mean their employment can be terminated.)</li>
<li>If an employee simply doesn’t wish to be vaccinated, employers aren’t required to make accommodations. However, while these employees can be excluded from the workplace, businesses should think hard about whether they’ll be willing to discipline employees who refuse.</li>
</ul>
<h2><b>Creating a Vaccine Policy</b></h2>
<p>Before any of the above becomes valid, vaccines must be available in your area and easily accessible for all employees. In reality, this might not be till well into 2021.</p>
<p>Ultimately the urgency of vaccinations may come down to your industry. If employees are interacting with the public, and especially elderly people, vaccinations will be essential. However, if you already operated a <a href="">remote-first workforce</a> anyway, it could be hard to justify the ‘business necessity’ of vaccinations.</p>
<p>To increase uptake, businesses can host vaccination drives on their premises and offer employees paid time off to receive their vaccines. When creating a vaccine policy, employers should also take into account local and state laws, and bear in mind that their right to mandate vaccines may be altered when dealing with unionized employees.</p>
<p><i>Paycor is not a legal, tax, benefit, accounting or investment advisor. All communication from Paycor should be confirmed by your company’s legal, tax, benefit, accounting or investment advisor before making any decisions.</i><a id="template"></a></p>
<h2><b>Download Employee Mandatory Vaccination Policy Letter Template</b></h2>
<p>Creating a COVID-19 vaccination policy is just the first step—next you need to communicate the details to your employees. To help businesses, Paycor is offering businesses a sample communication letter sharing your vaccination policy. Once downloaded, you can customize the text to your specific situation.</p>
<p><noscript class="text-center alert alert-danger">Javascript is required to interact with this content.</noscript></p>
<div class="prev-next">
<div class="left-link">
<p class="label"> Previous:</p><a href="" class="" rel="next"> Maximum PTO Accrual Letter</a>
</div>
<div class="right-link has-text-align-right">
<p class="label">Next:</p><a href="" class="" rel="prev"> Employee Reimbursement Form [Template]</a>
</div>
</div>
</main>
<aside class="single-sidebar" style="
grid-area: singleSidebar;
">
<h3>Share</h3>
<div class="wp-block-ws-social-share">
<div class="share-buttons">
<a class="share-button" href="" target="_blank" rel="noopener noreferrer">
<svg width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
<title>Facebook</title>
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
</svg> </a>
<a class="share-button" href="" target="_blank" rel="noopener noreferrer">
<svg width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
<title>Twitter</title>
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
</svg> </a>
<a class="share-button" href="" target="_blank" rel="noopener noreferrer">
<svg width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
<title>LinkedIn</title>
<path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"></path>
</svg> </a>
<a class="share-button" href="" target="_blank" rel="noopener noreferrer">
<svg width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
<title>Mail</title>
<path d="M12 12.713l-11.985-9.713h23.971l-11.986 9.713zm-5.425-1.822l-6.575-5.329v12.501l6.575-7.172zm10.85 0l6.575 7.172v-12.501l-6.575 5.329zm-1.557 1.261l-3.868 3.135-3.868-3.135-8.11 8.848h23.956l-8.11-8.848z"></path>
</svg> </a>
</div>
</div>
<hr class="wp-block-separator">
<h3 style="margin-bottom: 10px;">HR Research & Expert Advice</h3>
<p>Stay up to date with the latest HR trends</p>
<div class="subscribe-form">
<div class="wp-block-ws-form">
one more form will be here
</div>
</div>
<hr class="wp-block-separator">
<h3>Additional Topics</h3>
<a class="topic-link has-cerulean-color" href="/resource-center/all/?filter-topic=talent-management">
<svg width="30" height="30" viewBox="0 0 30 30" fill-rule="evenodd">
<title>Talent Management</title>
<path d="M27,30v0a3,3,0,0,1-2.14-.89l-7.55-7.55a11.53,11.53,0,1,1,4.27-4.27l7.56,7.56A3,3,0,0,1,27,30Zm-1.32-1.73a1.92,1.92,0,0,0,2.64,0,1.87,1.87,0,0,0,0-2.64h0l-7.38-7.38a11.41,11.41,0,0,1-2.64,2.64ZM1.16,11.54A10.37,10.37,0,1,0,11.53,1.17h0A10.38,10.38,0,0,0,1.16,11.54ZM6.35,19a.57.57,0,0,1-.58-.57V15.56a2.59,2.59,0,0,1,1.79-2.47l1.53-.4a.6.6,0,0,1,.55.15l1.9,1.9,1.9-1.9a.58.58,0,0,1,.57-.15l1.49.38a2.62,2.62,0,0,1,1.83,2.49v2.88a.58.58,0,0,1-1.16,0V15.56a1.43,1.43,0,0,0-1-1.38L14,13.89,12,16a.58.58,0,0,1-.81,0L9.07,13.89l-1.16.3a1.45,1.45,0,0,0-1,1.37v2.88a.58.58,0,0,1-.58.58ZM8.08,9.23a3.46,3.46,0,1,1,3.45,3.46h0A3.45,3.45,0,0,1,8.08,9.23Zm1.15,0a2.31,2.31,0,1,0,2.3-2.3A2.31,2.31,0,0,0,9.23,9.23Z"></path>
</svg> Talent Management
</a>
<a class="topic-link has-green-color" href="/resource-center/all/?filter-topic=workforce-management">
<svg width="30" height="30" viewBox="0 0 30 30" fill-rule="evenodd">
<title>Workforce Management</title>
<path d="M10.24,12.24A5.75,5.75,0,1,0,4.49,6.49,5.74,5.74,0,0,0,10.24,12.24ZM5.5,6.49a4.74,4.74,0,1,1,4.74,4.74A4.74,4.74,0,0,1,5.5,6.49Z"></path>
<path d="M20.77,15.68A4.34,4.34,0,0,0,16.44,20h0a4.34,4.34,0,0,0,4.34,4.34h0a4.34,4.34,0,0,0,0-8.68Zm0,7.67A3.33,3.33,0,0,1,17.44,20h0a3.33,3.33,0,0,1,3.33-3.33h0a3.33,3.33,0,1,1,0,6.66Z"></path>
<path d="M30,19.08l-.05-.58-2.32-.83a7.27,7.27,0,0,0-.34-.81l1.06-2.22-.37-.45a9.43,9.43,0,0,0-1.34-1.34l-.45-.36-2.22,1a7.22,7.22,0,0,0-.81-.33l-.82-2.31-.58-.06a9.74,9.74,0,0,0-1.87,0l-.58.06-.82,2.31a5.73,5.73,0,0,0-.81.33l-2.21-1-.45.36A8.77,8.77,0,0,0,13.81,14L10.27,17,5.89,12.66l-3.2,1A3.92,3.92,0,0,0,0,17.36v3.37a2,2,0,0,0,2,2H14.09a4.69,4.69,0,0,0,.21.46L13.25,25.4l.36.45A9.5,9.5,0,0,0,15,27.19l.45.37,2.21-1.06a8.16,8.16,0,0,0,.81.34l.83,2.31.58.06c.31,0,.62,0,.92,0s.61,0,.94,0l.58-.06.82-2.31a8.16,8.16,0,0,0,.81-.34l2.22,1.06.45-.37a10.05,10.05,0,0,0,1.35-1.34l.36-.45-1.05-2.22a8.16,8.16,0,0,0,.34-.81l2.32-.83L30,21A8.44,8.44,0,0,0,30,19.08ZM2,21.72a1,1,0,0,1-1-1V17.36a2.89,2.89,0,0,1,2-2.77l2.61-.78,4.62,4.61,3.42-3,.66,1.4a8.33,8.33,0,0,0-.34.82l-2.31.82-.06.58c0,.31-.05.63-.05.94s0,.63.05.95l.06.58.48.17Zm27-.91-2.18.78-.08.24A6.43,6.43,0,0,1,26.23,23l-.12.22,1,2.09A8.39,8.39,0,0,1,26,26.37l-2.09-1-.23.12a7.05,7.05,0,0,1-1.1.45l-.25.07-.77,2.19q-.39,0-.78,0t-.78,0L19.21,26,19,26a7.05,7.05,0,0,1-1.1-.45l-.22-.12h0l-2.09,1a7.83,7.83,0,0,1-1.12-1.11l1-2.09L15.31,23a5.92,5.92,0,0,1-.46-1.11l-.08-.25-2.18-.78a7.72,7.72,0,0,1,0-1.57l2.18-.78.08-.24a5.41,5.41,0,0,1,.46-1.11l.12-.23-1-2.09.08-.09,1.13-1,2,.95.23-.12A7.05,7.05,0,0,1,19,14.1l.24-.07L20,11.84q.38,0,.78,0t.78,0L22.32,14l.25.07a7.05,7.05,0,0,1,1.1.45l.22.12,2.1-1a8.39,8.39,0,0,1,1.12,1.11l-1,2.09.12.23a5.41,5.41,0,0,1,.46,1.11l.08.24,2.18.78A6.85,6.85,0,0,1,29,20,6.68,6.68,0,0,1,29,20.81Z"></path>
</svg> Workforce Management
</a>
<a class="topic-link has-blue-color" href="/resource-center/all/?filter-topic=employee-experience">
<svg width="30" height="30" viewBox="0 0 30 30" fill-rule="evenodd">
<title>Employee Experience</title>
<path d="M11.13,29.94a1.82,1.82,0,0,1-1.82-1.82V25.38a3.35,3.35,0,0,1,2.32-3.21L14,21.45a.55.55,0,0,1,.18,0,.63.63,0,0,1,.43.17l3.21,3.22L21,21.6a.61.61,0,0,1,.43-.17l.17,0,2.35.71a3.37,3.37,0,0,1,2.34,3.22v2.74A1.83,1.83,0,0,1,24.49,30ZM12,23.33a2.13,2.13,0,0,0-1.46,2.05v2.74a.61.61,0,0,0,.6.61H24.5a.6.6,0,0,0,.6-.61V25.38a2.18,2.18,0,0,0-1.49-2.06l-2-.59-3.39,3.39a.62.62,0,0,1-.86,0L14,22.73Zm1.24-5.12L8.55,20.67a2,2,0,0,1-.87.23,1.5,1.5,0,0,1-.88-.29A1.65,1.65,0,0,1,6.21,19l.91-5.28A.71.71,0,0,0,7,13.26L3.14,9.51a1.63,1.63,0,0,1-.49-1.67A1.64,1.64,0,0,1,4,6.77L9.34,6a.76.76,0,0,0,.37-.27L12.08.93a1.54,1.54,0,0,1,2-.87A1.52,1.52,0,0,1,15,.93l2.37,4.8A.81.81,0,0,0,17.7,6L23,6.77a1.64,1.64,0,0,1,1.38,1.07,1.63,1.63,0,0,1-.49,1.67l-3.22,3.14a4.86,4.86,0,1,1-7.45,5.56Zm.94-1.64a3.65,3.65,0,1,0,5.49-3.14.58.58,0,0,1-.51-.25,3.64,3.64,0,0,0-4.72,2.07,3.52,3.52,0,0,0-.25,1.32Zm-1-15.11L10.8,6.28a1.93,1.93,0,0,1-1.29.93L4.2,8c-.1,0-.33.07-.39.24A.47.47,0,0,0,4,8.64l3.84,3.75a1.93,1.93,0,0,1,.49,1.51l-.91,5.28c0,.1,0,.34.11.45a.45.45,0,0,0,.46,0l4.75-2.49A.51.51,0,0,1,13,17c0-.15,0-.3,0-.46a4.87,4.87,0,0,1,4.86-4.86,4.73,4.73,0,0,1,1.75.33l3.49-3.4c.07-.07.23-.25.18-.42s-.3-.23-.4-.24l-5.31-.77a1.91,1.91,0,0,1-1.28-.93L13.87,1.47c0-.09-.17-.3-.35-.3s-.3.21-.35.3Z"></path>
</svg> Employee Experience
</a>
<a class="topic-link has-purple-color" href="/resource-center/all/?filter-topic=benefits-administration">
<svg width="30" height="30" viewBox="0 0 30 30" fill-rule="evenodd">
<title>Benefits Administration</title>
<path d="M22.39,28.75h0l-5.7-.23a.72.72,0,0,1-.68-.75,28,28,0,0,0-.24-5.64,12,12,0,0,1-.15-2.24c.09-2.35,1.58-3.2,3.31-4.17h0a18.51,18.51,0,0,0,3.58-2.46,3.28,3.28,0,0,1,2.12-.78,3.66,3.66,0,0,1,.57,0l.21-5.09a2.19,2.19,0,0,1,2.15-2.08l0,0a2.18,2.18,0,0,1,2.07,2.17L30,16.19a3.35,3.35,0,0,1-1,2.28c-2.36,2.32-5.72,6.16-5.77,7.45l-.09,2.14a.71.71,0,0,1-.71.69ZM23.17,14a19.34,19.34,0,0,1-3.76,2.59c-1.79,1-2.73,1.62-2.8,3.33A12,12,0,0,0,16.76,22a28.89,28.89,0,0,1,.26,5.5l5.06.21.08-1.82c0-.57.29-1.53,2.25-3.95a50.83,50.83,0,0,1,3.84-4.2A2.33,2.33,0,0,0,29,16.17l-.36-8.56c-.07-.54-.32-1.19-1.06-1.23h0a1.14,1.14,0,0,0-1.11,1l-.21,5.1a1.07,1.07,0,0,1-.1.4A2,2,0,0,1,26.93,14a1.45,1.45,0,0,1-.44,1.34c-1.07,1.16-3,2.82-3.06,2.88a.55.55,0,0,1-.34.13.52.52,0,0,1-.52-.52.53.53,0,0,1,.18-.39s1.95-1.69,3-2.81c.23-.24.2-.37.19-.41-.06-.29-.56-.61-.81-.71l-.05,0H25a1.87,1.87,0,0,0-.34,0h0A2.23,2.23,0,0,0,23.17,14ZM6.9,28,6.81,25.9C6.73,24.6,3.32,20.68,1,18.44a3.38,3.38,0,0,1-1-2.27L.36,7.52A2.22,2.22,0,0,1,2.44,5.35h.08l-.08,0A2.18,2.18,0,0,1,4.58,7.4l.21,5.1a2.75,2.75,0,0,1,.57-.05h0a3.23,3.23,0,0,1,2.12.78,18.79,18.79,0,0,0,3.58,2.46c1.73,1,3.22,1.82,3.32,4.18a11.21,11.21,0,0,1-.16,2.24A27.24,27.24,0,0,0,14,27.75a.72.72,0,0,1-.69.74l-5.7.24A.72.72,0,0,1,6.9,28ZM1.44,7.6l-.36,8.57a2.31,2.31,0,0,0,.75,1.55,52.53,52.53,0,0,1,3.83,4.2c2,2.48,2.25,3.44,2.25,3.95L8,27.69l5.07-.2a28.89,28.89,0,0,1,.26-5.5,11.14,11.14,0,0,0,.15-2.08c-.07-1.7-1-2.31-2.79-3.32A19.55,19.55,0,0,1,6.9,14a2.21,2.21,0,0,0-1.43-.52h0a1.39,1.39,0,0,0-.35,0H5l0,0c-.29.13-.75.44-.81.72a.55.55,0,0,0,.19.41c1,1.13,3,2.79,3,2.81a.51.51,0,0,1,0,.73.52.52,0,0,1-.73.06h0c-.08-.07-2-1.73-3.07-2.89a1.47,1.47,0,0,1-.44-1.33A2,2,0,0,1,4,12.93a1.12,1.12,0,0,1-.1-.41l-.21-5.1a1.12,1.12,0,0,0-1.11-1H2.48C2.15,6.4,1.58,6.58,1.44,7.6Zm8,2.1A5.63,5.63,0,0,1,8.27,4.62a4.34,4.34,0,0,1,4.08-3.37h0a4.22,4.22,0,0,1,2.85,1.1,4.24,4.24,0,0,1,2.85-1.1,4.34,4.34,0,0,1,4.09,3.37c.65,2.21.08,5.61-6.32,9.23l-.18.1a.69.69,0,0,1-.44.15A14.84,14.84,0,0,1,9.42,9.7ZM9.24,4.92a4.53,4.53,0,0,0,1,4.14A14.92,14.92,0,0,0,15.19,13l.12-.07c3.2-1.82,6.81-4.69,5.83-8A3.36,3.36,0,0,0,18,2.27l0,0h0a3.16,3.16,0,0,0-2.16.83l-.69.61-.69-.61a3.2,3.2,0,0,0-2.16-.84h0A3.34,3.34,0,0,0,9.24,4.92Z"></path>
</svg> Benefits Administration
</a>
</aside>
</div>
