把左邊div圍繞左邊div

Question

我想把我的右邊div圍繞我的左邊反月亮形狀？這是它現在的樣子。

我想要做的是周圍有黑塊的圓角落的紅色塊包裹。這裏是目前的HTML/CSS代碼，我很抱歉，如果CSS代碼有點「雜亂」，因爲我已經嘗試過不同的代碼。

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

答案找到了，感謝您的幫助，所以不得不從您發佈的代碼調整一下代碼，它看起來現在這樣。

.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; 

} 

和最終結果看起來像這樣，將調整定位一些，但結果是我想要的，再次感謝。

更新2

好吧，不得不做出另一個編輯，出於某種原因，我不得不上浮他們兩個離開。另外，如果我保持紅色浮動右邊，並試圖擴大其寬度，它會擴大到左邊，任何想法爲什麼？當前代碼：

.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

使用位置：相對;對於content和位置：絕對;爲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>