<!DOCTYPE html>
<html>
<head>
<title> Title of the document </title>
<style>
#box {
width: 280px;
height: 170px;
padding: 20px;
text-align: justify;
border: 10px solid #795d80;
background: #a997ad;
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<div id="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<button type="button">Get outerWidth and outerHeight</button>
<p id="result"></p>
<hr>
<script>
$(document)
.ready(function() {
$("button")
.click(function() {
var divWidth = $("#box")
.outerWidth();
var divHeight = $("#box")
.outerHeight();
$("#result")
.html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
});
});
</script>
</body>
</html>