How to adapt the block?

Hello! Please help to solve the problem, have the unit, which in turn is divided into two, how do I make so that when you reduce the screen size, the blocks were moved out, and the main block was decreased along with its contents, while maintaining the aspect ratio!?
HTML code:
<div class="myprof">
 <div class="prof-left">
 <img src="" alt>
 <div class="prof-right">


CSS code:
.myprof {
 max-width: 100%;
 padding: 10px;
 background: #fff;
 border: 1px solid #333;
 border-radius: 3px;
 margin: 0 53px 53px 73px;
.prof-left {
 display: inline-block;
 vertical-align: top;
.prof-right {
 width: 930px;
 height: 450px;
 margin-left: 7px;
 vertical-align: top;
 border: 1px solid blue;
 display: inline-block;
June 10th 19 at 16:34
1 answer
June 10th 19 at 16:36
For .prof-left and .prof-right-width set in percent, ie, for example .prof-left {width:30%;} and .prof-right {width:70%;}. To find the percentage on the maximum possible width of the main unit.

Find more questions by tags Web DevelopmentCSSHTMLJavaScript