Html 当iframe显示为display:block时，如何将iframe和div并排显示；

我需要将iframe和div并排对齐。问题是，当我添加

display:inline块时，iframe被取消
这是已设置的视频/iframe样式

.video-container {
    max-width: 620px;
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    background-color: #000;
}

.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

我尝试将它们添加到包装器中，并使包装器
相对
和side div
绝对
，但无法使其工作。
这一切都必须是响应性的，但我可以自己管理这部分，只是需要帮助使它们并排，最好是两者都
相对

这里有一个代码笔链接，我正试图实现：
这就是你的目标吗？

您能提供您正在使用的标记吗，即使只是针对本节？你的链接似乎不正确link@JesseEarley哦，真的很抱歉。这是我试图添加的codepen.io/Volcan3/pen/pmbykzi的链接。您的这个side div的标记丢失了吗？我没有在你的密码笔中看到：）@JesseEarley对不起，我不知道如何正确地问这个问题，这样可能会有点困惑。我在问题中提到的div应该在视频旁边的灰色区域。因此，html代码在技术上正好位于
.video wrapper
类之下（或之上）。但由于我打算让它看起来更适合手机和更小的屏幕，我还没有添加它。如果这些有任何意义的话。@JesseEarley我也用Aitle文本和我认为需要的div更新了codepen，但我没有给它任何css（或内容），因为我不知道如何在不给
.video wrapper
显示：inlin块的情况下使其符合我的需要不完全是这样，从类的
.video-…
中删除或更改样式将使iframe无法按预期调整大小，而且这将对整个视频的内容产生影响。我真正的目标是了解twitch.tv或youtube.com是如何做到这一点的。使用可调整大小的ifram（提供了样式），然后在其旁边有一些内容。虽然顶部和底部的“黑条”只是视频信息的占位符。我已经更新了样式，这就是你拍摄的目的吗？是的，这正是我想要的，非常感谢你的帮助：）
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.video-container {
   width: 50%;
   float: left;
}

.video {
   position: relative;
   padding-bottom: 56.25%;
   background-color: #000;
   height: 0;
   overflow: hidden;
   max-width: 100%;
}

.video iframe{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.side-div{
   background: blue;
   color: #fff;
   float: left;
   width: 50%;
}


.wrapper {
   width:100%;
   background-color:#CCC;
}

.wrapper-top {
   width:100%;
   height:60px;
   background-color:#000;
}

.wrapper-bottom {
   width:100%;
   height:40px;
   background-color:#000;
   clear: both
}