JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<dl>
    <dt>
        <label>Awesomeness<span class="required"> *</span></label>
    </dt>
    <dd>Something here</dd>

    <dt>
        <label>Label Here</label>
    </dt>
    <dd>Something here</dd>
</dl>

<dl>
    <dt>
        <label>Awesomeness<span class="required"> *</span></label>
    </dt>
    <dd>Something here</dd>

    <dt>
        <label>Label Here</label>
    </dt>
    <dd>Something here</dd>

    <dt>
        <label>Here is another label<span class="required"> *</span></label>
    </dt>
    <dd>Something here</dd>
</dl>
</div>

CSS

div {
    background-color: red;
    height: 40px;
    border: 1px solid #000;
}

JavaScript

$('dl').each(function() {
  $(this).children('dt').each(function() {
     var $dt = $(this),
         $dd = $dt.next('dd');

     if($dd.length) {
                  //console.log($dt.html());
        $dt.add($dd).wrapAll('<div class="' + $dt.children('label').get(0).className + '">');
         
     }
  });
});