绕左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;
}

更新

回答找到了，感谢您的帮助，所以不得不从您发布的代码中调整一下代码，现在看起来就像这样。

.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

好的，不得不进行另一次编辑，出于某种原因我不得不将它们两个漂浮起来。如果我保持红色div向右浮动并试图扩大其宽度，它会向左扩展，任何想法为什么？当前代码：

.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

使用position：relative; 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>