JSFiddle - React, Tailwind, and code Playground

HTML

<!-- FirstBlock -->
<div class="parent">
    <div class="firstElement">dddd</div>
    <div class="secondElement">aaa</div>
</div>
<!-- SecondBlock -->
<div class="parent">
    <div class="firstElement">firstElement</div>
    <div class="secondElement">secondElement</div>
</div>
<!-- ThirdBlock -->     
<div class="parent">
    <div class="firstElement">firstElement</div>
    <div class="secondElement">secondElement</div>
</div>
    
    I want it look like this
<!-- FirstBlock -->
<div class="parent">
  <div class="firstElement">firstElement
    <div class="secondElement">secondElement</div>
  </div>
</div>
<!-- SecondBlock -->
<div class="parent">
  <div class="firstElement">firstElement</div>
  <div class="secondElement">secondElement</div>
</div>
<!-- ThirdBlock -->     
<div>
  <div class="parent">
    <div class="firstElement">firstElement</div>
    <div class="secondElement">secondElement</div>
  </div>
</div>

CSS

.firstElement {
    height: 50px;
    border: 1px solid #000;
}

.secondElement {
    background-color: #aaa;
}

JavaScript

function getElement() {
	var parents = document.getElementsByClassName('parent'),
        parentsLength = parents.length;

	while (parentsLength--){
		var firstElements = parents[parentsLength].getElementsByClassName('firstElement'),
            firstElementsLength = firstElements.length,
			secondElements = parents[parentsLength].getElementsByClassName('secondElement');
alert("first-elem: " + firstElements + "\nsecond-elem: " + secondElements);
        while(firstElementsLength--) {
            var secondElementsLength = secondElements.length;
            while(secondElementsLength--) {
	firstElements[firstElementsLength].appendChild(secondElements[secondElementsLength]);
            }
        }
	};
}

getElement();