JSFiddle - React, Tailwind, and code Playground

by alexche8

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>calculating element dimensions</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>
<div class="outer">
<div class="box">
<p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand how each of the properties combine to effect the overall width (and height) of page elements.
</p>
</div>
</div>
</body>
</html>

CSS

aside, article, section, header, footer, nav {
    display: block;
}
div, p {
    margin: 0;
    padding:0;
}
html {
    background: #ccc;
}
.outer {
    width: 600px;
    margin: 0 auto;
    background: #9CF;
}
.box{
    background: #B7D19C;
}
p {
    background: #FF9;
    height: 100%;
}
    
/*add styles here*/