JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-content">
			<div class="left">
                <h1>Jingle Bells</h1>
				<p>Dashing through the snow<br />
						On a one horse open sleigh<br />
						O'er the fields we go,<br />
						Laughing all the way<br />
						Bells on bob tail ring,<br />
						making spirits bright<br />
						What fun it is to laugh and sing<br />
						A sleighing song tonight<br />
						<br />
						Oh, jingle bells, jingle bells<br />
						Jingle all the way<br />
						Oh, what fun it is to ride<br />
						In a one horse open sleigh<br />
						Jingle bells, jingle bells<br />
						Jingle all the way<br />
						Oh, what fun it is to ride<br />
						In a one horse open sleigh<br />
						<br />
						A day or two ago,<br />
						I thought I'd take a ride,<br />
						And soon Miss Fanny Bright<br />
						Was seated by my side;<br />
						The horse was lean and lank<br />
						Misfortune seemed his lot<br />
						We got into a drifted bank,<br />
						And then we got upsot.<br />
						<br />
						Oh, jingle bells, jingle bells<br />
						Jingle all the way<br />
						Oh, what fun it is to ride<br />
						In a one horse open sleigh<br />
						Jingle bells, jingle bells<br />
						Jingle all the way<br />
						Oh, what fun it is to ride<br />
						In a one horse open sleigh<br />
						<br />
						Jingle Bells, Jingle Bells,<br />
						Jingle all the way!<br />
						Oh, What fun it is to ride<br />
						In a one horse open sleigh.<br />
						Jingle Bells, Jingle Bells,<br />
						Jingle all the way!<br />
						Oh, What fun it is to ride<br />
						In a one horse open sleigh.<br />
						<br />
						Now the ground is white<br />
						Go it while you're young<br />
						Take the girls tonight<br />
						And sing this sleighing song<br />
						Just get a bob tailed bay<br />
						two-forty as his speed<br />
						Hitch him to an open sleigh<br />
						And crack! you'll take the lead<br />
						<br />
						Jingle Bells, Jingle...

CSS

.main-content {
    position: relative;
    width: 1000px;
    margin: auto;
}
/*align image to center (horizontal) and place it by absolute positioning (so the image is always appearing on the same spot) after placing it we will create an empty spot so the text will appear to flow around the image*/
img.christmas-tree  {
    position: absolute;
    left: calc(50% - 215px);
    width: 430px;
}
/*Just some text assigned to the right div*/
.right{
    width: 50%;
    float: right;
}
/*We will create empty space where the christmas tree is by adding blank content with ::before*/
.right::before{
    content: "";
    height: 550px;
    shape-outside: polygon(50px 0, 50px 150px, 215px 550px, 0 550px);/*this cuts out a part of the block so the text can freely move around. The values in here are coördinates in this blank content that allow text to float around it.*/
    width: 100%;
    float: left;    
}
.left{
    width: 50%;
    float: left;
    clear: left;
    text-align: right;
}
/*We will create empty space where the christmas tree is by adding blank content with ::before*/
.left::before{
    content: "";
    shape-outside: polygon(450px 0px, 450px 150px, 270px 550px, 500px 550px); /*this cuts out a part of the block so the text can freely move around*/
    height: 550px;
    width: 100%;
    float: right;
}