Wrap right div around left div

Question

I am trying to wrap my right div around my left, in an inverse moon shape? Here's what it looks like right now.

What I want to do is have the red block wrap around the rounder corners of the black block. Here is the current HTML/CSS code, I apologize if the CSS code is a little "messy" as i have been experimented different codes.

HTML

<div class="container full-width">
  <div class="row proj">
    <div class="col-md-8 full-width">          
      <div class="content">          
      </div>
    </div>
    <div class="col-md-4 full-width">          
      <div class="options">
      </div>
    </div>  
  </div>
</div>

CSS

 .content { 
    margin-top: 75px;
    position: relative;
    width: 70vw;
    max-width: 100%;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: black;
    border-radius: 0 50vw 50vw 0;   
}

.options {  
    margin-top: 75px;
    position: relative;
    width: 30vw;
    max-width: 100%;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: red;  
}

.container .full-width{ 
    padding-left: 0;
    padding-right: 0;    
    overflow-x: hidden;
}

UPDATE

Answer Found, thanks for the help, so had to tweak the code a bit from your posted code, it looks like this now.

.content { 
   margin-top: 75px;
    width: 30vw;
    height: 90vh;
    overflow: hidden;
    background-color: black;
    border-radius: 0 50vw 50vw 0;   
    float:left;
    position:relative;
    z-index:2;     
}

.options {  
    margin-top: 75px;
    margin-left:3%;
    position:relative;
    float:right;
    width: 30vw;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: red;      
}

.container .full-width{ 
    position: absolute;
    padding-left: 0;
    padding-right: 0;

}

and the final result looks like this, will tweak the positioning some more but the result is what i wanted, thanks again.

UPDATE 2

Ok, had to make another edit, for some reason I had to float them both left. OTherwise if i kept the red div float right and tried to expand its width, it would expand to the left, any idea why? current code:

.content { 
   margin-top: 75px;
    width: 44vw;
    height: 90vh;
    overflow: hidden;
    background-color: black;
    border-radius: 0 50vw 50vw 0;   
    float:left;
    position:relative;
    z-index:2;     
}

.options {  
    margin-top: 75px;
    margin-left:20%;
    position:relative;
    float:left;
    width: 50vw;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: red;      
}

.container .full-width{ 
    position: absolute;
    padding-left: 0;
    padding-right: 0;

}

Answer 1

Use position:relative; for content and position:absolute; for options

 .content { 
    width: 30vw;
    height: 90vh;
    overflow: hidden;
    background-color: black;
    border-radius: 0 50vw 50vw 0;   
    float:left;
    position:relative;
    z-index:2;
}

.options {  
    margin-left:3%;
    position:absolute;
    float:right;
    width: 30vw;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: red;  
}

<div class="container full-width">
      <div class="row proj">
        <div class="col-md-8 full-width">          
          <div class="content">          
          </div>
        </div>
        <div class="col-md-4 full-width">          
          <div class="options">
          </div>
        </div>  
    </div>