html - 在右侧创建响应元素

Question

我无法在与左侧图像相同的高度上创建响应式 div。在此 div 中，我想添加文本，但是当我这样做时，当我尝试更改窗口的分辨率时，段落的高度和 div 元素也会拉伸(stretch)。 Check codepen

HTML:

#left-side {
  width: 50%;
  height: 60em;
  background-color: black;
  float: left;
  text-align: center;
  display: inline-block;
}

#left-side>div>img {
  margin-top: 15%;
  border: solid #A98646 2px;
  border-bottom: none;
  width: 50%;
  height: 25%;
}

#right-side {
  width: 50%;
  height: 60em;
  background-color: red;
  float: left;
  text-align: center;
  display: inline-block;
}

.description {
  margin-top: 15%;
  width: 50%;
  height: 72%;
  margin-left: 25%;
  background: green;
}

<section>
  <article id="left-side">
    <div class="image">
      <img src="img1.jpg">
    </div>
  </article>
  <article id="right-side">
    <div class="description">2</div>
  </article>
</section>

Answer 1

如果你在 #right-side 元素上用 position:absolute; 做这样的事情会怎么样？

CodePen

header{
    background-color: #282828;
    width: 100%;
    height: 35em;
}

header > h1{
    color: #A98646;
    font-family: 'Righteous';
    font-size: 4rem;
    text-align: center;
    padding-top: 6.75rem;
    
}

header .logo{
    width: 40px;
    margin-left: 2rem;
    margin-top: 2rem;
    opacity: 0.3;
}

header .logo:hover{
    opacity: 1;
    transition: 0.2s;
}

nav{
    float: right;
    margin-right: 2rem;
    margin-top: 0rem;
    text-align: center;
    cursor: pointer;
}

nav li{
    display: none;
    background-color: black;
}

nav>ul>img{
    width: 100px;
}

header > p{
    text-align: center;
    margin-top: 30px;
    color: white;
    font-family: 'Old Standard TT', serif;
}



#left-side{
    width: 50%;
    height: 60em;
    background-color: black;
    float: left;
    text-align: center;
    display: inline-block;
}
.image {
  height: 100%;
  position: relative;
}

#left-side>div>img{
    margin-top: 15%;
    border: solid #A98646 2px;
    border-bottom: none;
    width: 50%;
    height: 75%;
}


#right-side{
    width: 50%;
    height: 100%;
    background-color: red;
    text-align: center;
    display: inline-block;
    position: absolute;
}

.description{
    width: 50%;
    height: 75%;
    margin: 15% auto;
    background: green;

}


section { 
    height: 100%;
    display: inline-block;
    position: relative;
    width: 100%;
}

<section>
  <article id="left-side">
    <div class="image">
      <img src="img1.jpg">
    </div>
  </article>
  <article id="right-side">
    <div class="description">2</div>
  </article>
</section>