JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pure-g-r" data-XXX="" >
    <div id="test" class="pure-u-1-2" style="padding: 30px 0px 30px 8.33%; cursor: default;" data-YYY="">
        <div data-ZZZ="" >
            <div class="actionsOuter" style=""></div>
            <div class="content" style="">XXXXXX</div>                
        </div>
    </div>
</div>

CSS

.padd {
    border: 1px solid #CCC;
}

.pure-g-r {
    display: table-row;
}

.pure-u-1-2 {
    display: table-cell;
}

JavaScript

var elem = $("#test");
var dElem = document.getElementById("test");

console.log("padding: ", elem.css("padding"), " - ", dElem.style.padding);
console.log("padding-left: ", elem.css("padding-left"), " - ", dElem.style["padding-left"]);
console.log("padding-right: ", elem.css("padding-right"), " - ", dElem.style["padding-right"]);
console.log("padding-top: ", elem.css("padding-top"), " - ", dElem.style["padding-top"]);
console.log("padding-bottom: ", elem.css("padding-bottom"), " - ", dElem.style["padding-bottom"]);