html - 将表格放在2个div之间

我目前正在学习css和bootstrap，并且目前正在尝试重新创建一个非常简单的布局，但是我遇到了一些问题。

基本上，我彼此之间有2个div，并且我希望有一个跨2个div的表单。我还不确定如何实现这一目标。

HTML：

<div class="one">
<div class="container">
<div class="row mx-auto">
<div class="col-sm">
  One of three columns
</div>
<div class="col-sm">
  One of three columns
</div>
<div class="col-sm">
  One of three columns
</div>
</div>
</div>
</div>

<div class="two">
<div class="container">
<div class="row">
<div class="col-sm">
  One of three columns
</div>
<div class="col-sm">
  One of three columns
</div>
<div class="col-sm">
  One of three columns
</div>
</div>
</div>
</div>

<div class="form">
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
 placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
 </select>
 </div>
 <div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
</textarea>
</div>
</form></div>

CSS：

.one {
height: 50vh;
background-color : black;
color : white;
}

.two {
height: 50vh;
background-color : red;
color : white;
}

.form {
width: 30%;
}

这是我在Codepen中编写的一些基本示例：

https://codepen.io/JeremyLemer1/pen/MWgKXzL

这是我希望它看起来像的基本图像：

https://imgur.com/a/ZqlSbnW

最佳答案

您可以尝试以下方法：

.bigdiv {
  height: 300px;
  background: black;
  color: white;
}
.smalldiv {
  width: 250px;
  height: 400px;
  background: orange;
  float: right;
  margin-right:10px;
  transform: translateY(-50%);
  /*
  you can use margin-top:-50px; for browser compatibility
  margin top shoult be -(half of div height);

  */
}

.bigdiv1 {
  height: 300px;
  background: darkblue;
  border: 6px solid black;
  color: white;
}

  <div class='wrapper'>
    <div class='bigdiv'>
      <p> Random Text</p>
      <p>Lorem Ipsum</p>
    </div>
    <div class='smalldiv'>
        <form>
            <div class="form-group">
            <label for="exampleFormControlInput1">Email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1"
             placeholder="[email protected]">
            </div>
            <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            </div>
            <div class="form-group">
            <label for="exampleFormControlSelect2">Example multiple select</label>
            <select multiple class="form-control" id="exampleFormControlSelect2">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
             </select>
             </div>
             <div class="form-group">
            <label for="exampleFormControlTextarea1">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
            </textarea>
            </div>
            </form>
    </div>
    <div class='bigdiv1'>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In, vel iusto. Rem, quidem necessitatibus. Earum odit consequuntur veniam sapiente. Debitis possimus distinctio minus culpa velit corporis, repellendus nihil perferendis cum quam illum dignissimos in nulla atque odit pariatur, eaque praesentium reprehenderit molestias adipisci quibusdam dolorum perspiciatis quos dicta? Recusandae, voluptas dolorem pariatur autem maiores dicta accusamus quis dolorum, alias, voluptatem tempora beatae saepe o  </p>
    </div>

  </div>