JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div class="wrapper">
			<div class="tabFarm">
				<div class="clear">
					<div class="printHeader"><img src="/includes/images/logo.png" height="70px" /><div style="width: 20px; display: inline-block;"></div><img src="/includes/images/company.jpg" height="70px" /></div>
					<div class="selectbox">
						Farm: Farm A
					</div>
				</div>
				<div class="topinfo">
					<div class="topGraph">
						<div class="Graph">
							<div>
								<h2>Yield prognose</h2>
							</div>
                            <img src="http://www.fieldlook.com/projectX/includes/images/tmp/graph_management_1.png" width="500px" />
						</div>
						<div class="info">
							<div class="standardWidth">High:</div>Farm 1 <br />
							<div class="standardWidth">Average:</div>Farm 2 <br />
							<div class="standardWidth">Low:</div>Farm 3 <br />
						</div>
					</div>
					<div class="bottomGraph">
						<div class="Graph">
							<div>
								<h2>Protein prognose</h2>
							</div>
							<img src="http://www.fieldlook.com/projectX/includes/images/tmp/graph_management_2.png" width="500px" />
						</div>
						<div class="info">
							<div class="standardWidth">High:</div>Farm 1 <br />
							<div class="standardWidth">Average:</div>Farm 2 <br />
							<div class="standardWidth">Low:</div>Farm 3 <br />
						</div>
					</div>
				</div>
				<div class="pageBreak"></div>
				<div class="bottominfo">
					<div class="blockTitle">
						<h2>Yield</h2>
					</div>
					<div class="leftPix">
						<div class="Pix">
							<img src="http://www.fieldlook.com/projectX/includes/images/tmp/pix_farm_1.png" width="200px" />
						</div>
						<div class="info">
							Low
						</div>
					</div>
					<div class="centerPix">
						<div class="Pix">
							<img src="http://www.fieldlook.com/projectX/includes/images/tmp/pix_farm_2.png" width="200px" />
						</div>
						<div class="info">
							Average
						</div>
					</div>
					<div class="rightPix">
						<div...

CSS

body {
}

div {
	position: relative;
}

.wrapper {
	background: #FFF;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.clear {
	clear: both;
	height: 100px;
}

.selectbox {
	float: left;
	vertical-align: middle;
	margin-left: 10px;
	margin-bottom: 20px;
}

.topinfo {
	display: inline-block;
	width: 750px;
	margin-bottom: 40px;
	margin-left: 15px;
}

.topGraph {
	display: inline-block;
	height: 400px;
}

.bottomGraph {
	display: inline-block;
	height: 400px;
}

.Graph {
	display: inline-block;
	float: left;
}

.info {
	display: inline-block;
	float: right;
	font-size: 18px;
	position: relative;
	top: 40%;
	margin-left: 40px;
}

.bottominfo .info {
	float: none;
	font-style: italic;
	width: inherit;
}

.standardWidth {
	width: 80px;
	display: inline-block;
}

.bottominfo {
	display: inline-block;
	width: 780px;
	margin-left: 15px;
}

.leftPix {
	display: inline-block;
	float: left;
}

.centerPix {
	display: inline-block;
	margin-left: 90px;
	margin-right: 90px;
}

.rightPix {
	display: inline-block;
	float: right;
}

.Pix {
}

.legend {
}

.printHeader {
	float: right;
	height: 79px;
	line-height: 79px;
	vertical-align: middle;
}

@media print {
	.pageBreak {
		page-break-after: always;
		-webkit-region-break-after: always;
		height: 2px;
		display: block;
        float: none;
	}
	
	.topinfo {
		-webkit-region-break-inside: avoid;
		-webkit-region-break-after: always;
		page-break-after: always;
        page-break-inside: avoid;
	}
	
	.blockTitle {
		page-break-after: avoid;
		-webkit-region-break-after: avoid;
	}
	
	.leftPix, img {
		-webkit-region-break-inside: avoid;
		page-break-inside : avoid;
	}
}

JavaScript

function printPage()
{
	window.print();
	setTimeout( function () { alert("Printed"); }, 250);
}