JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">
    <p id="p1">Here is some text.</p>
</div>

<div id="d2">
    <p id="p2">Here is some other text.</p>
    <!-- I want this text in p2 to have the same styling as the text in p1, even after the inheritances of the divs are factored. -->
</div>

CSS

#d1 #p1{
  width: 10%;
  color: blue;
}

JavaScript

var target = document.querySelector('#p1');
var receiver = document.querySelector('#p2');
var styles   = getComputedStyle(target);

var cssText = '';
for(var style in styles){
    cssText += style+':'+styles[style];
}

receiver.style.cssText = cssText;