html - How to wrap parts of your existing webpage in 3 divs next to each other -

i have made webpage, elements there , in place. can see in example, main part of page has distinctive structure:
left - menu circles
middle - text
right - pictures

i want make 3 seperate divs, div circles, div text , div pictures. there way without changing of website.

it other people can edit webpage more later on.

https://plnkr.co/edit/yhs1i3nfw3ucquik2p8o?p=preview

       <style>.smallmenu {margin: 0 auto; max-width: 436px;width: 100%; } .circlemenu {display: inline-block;margin: auto;width: 106px height: 107; margin-bottom: 18px;border: solid 2px #73b7db;background: #73b7db;width: 100px;height: 100px;border-radius: 100px;text-align: center;line-height: 440%;font-size: 22px;text-decoration: none;} .circle {border: solid 2px #73b7db;background: #73b7db;width: 100px;height: 100px;border-radius: 100px;text-align: center;line-height: 440%;font-size: 22px;text-decoration: none;} .paragraphs {margin: 7% 40% 2% 15%} .imageleft {float: left;margin: 00% 10% 10% -20%;} .imageright {float: right; margin: -5% -80% 10% 10%; width:300px; height:174px} #hovermenu:hover {border: solid 2px #464646;background: #464646;width: 100px;height: 100px;border-radius: 100px;text-align: center;line-height: 440%;font-size: 22px; text-decoration: none;} .quizbox {width: 70%;max-width: 950px;border: 1px gray solid; margin: auto;padding: 10px;     border-radius: 10px;border-width: 5px;border-color: #00a7ae;margin-top: 7%;text-align: center;position: relative;     background: #73b7db; }.row {text-align: left;color: white;margin-left: 10%;}span#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13, #answer14, #answer15, #answer16 {display: inline;color: green; margin-right: 30%;float:right; width:50%; } input[type="submit"] { padding: 10px 15px 11px !important; font-size: 18px !important; background-color: #00995d; font-weight: bold; color: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #57d6c7; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; }     </style>      <p style="text-align: center;"><span style="font-size: 24pt;">mit dem fahrrad zur schule? aber sicher!</span></p>     <p style="margin: 2% 20% 2% 20%;">es gibt viele gute gründe, mit dem fahrrad zur schule zu fahren. lerne sie kennen und plane deine persönliche, sicherste route.</p>     &nbsp;     <div class="smallmenu">     <a class="circlemenu" href="#why" id="hovermenu"><font color="white">warum</font></a>     <a class="circlemenu" href="#what" id="hovermenu"><font color="white">was</font></a>     <a class="circlemenu" href="#how" id="hovermenu"><font color="white">wie</font></a>     <a class="circlemenu" href="#quiz" id="hovermenu"><font color="white">quiz</font></a>     </div>     &nbsp;      <hr width="100%" />      <div class="paragraphs">      <a class="imageleft circle" id="why"><font color="white">warum</font></a><img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum.      </div> 

the flex property has been created purpose :

.main {    display : flex;    justify-content : space-around;    background-color : black;  }    .main .sub {    width : 100px;    height : 100px;    background-color : red;  }

<div class="main">    <div class="sub"><p>first div</p></div>    <div class="sub"><p>second div</p></div>    <div class="sub"><p>third div</p></div>  </div>

you can change value of justify-content space-between, that's taste.