对齐的表单-背景图像中间的输入字段/按钮

Question

我想做一个设计html/css的形式，就像在这个图像:https://postimg.org/image/u2rrzgz09/

表单应该在背景(-image)的中心，文本(Text1和Text2)应该在字段开始的地方开始(左)，按钮应该显示在表单的中心。

直到现在:https://jsfiddle.net/jk17sj87/

HTML:

<div class="parent">
  <div class="col1">
     <div class="text">
        Text1
     </div>
     <div class="sec11">
        (image)
     <input type="text"/>
     </div>
     <div class="sec2">
        (image)
    <input type="text"/>
    </div>
  </div>
  <div class="col2">
    <div class="text">
       Text2
    </div>
  <div class="sec3">
      (image)
      <input type="text"/>
  </div>
  <div class="sec4">
      (image)
      <input type="text"/>
  </div>
</div>
</div>
<div class="button">
   <button>Button</button>
</div>

CSS:

.parent{ width: 100%; display: flex;}
.col1{margin-right: 10px;}
.text{margin-left: 52px;}
.button {margin-left: 200px;}

Answer 1

 /*Programs*/
.parent{
 width: 100%;
 display: flex; 
 height: 100%;
 min-height: 200px;
 }
 .col1, .col2 {
  display: inline-block;
 }
 .text{
  margin-left: 52px;
 }
 .button { 
  text-align: center;
 }
 .parent-content {
   margin: auto;
 }

<div class="parent">
<div class="parent-content">
<div class="col1">
<div class="text">
Text1
</div>
  
<div class="sec11">
    (image)
    <input type="text"/>
</div>
<div class="sec2">
    (image)
    <input type="text"/>
</div>
</div>
  
<div class="col2">
<div class="text">
Text2
</div>
<div class="sec3">
    (image)
    <input type="text"/>
</div>
<div class="sec4">
    (image)
    <input type="text"/>
</div>
</div>
<div class="button">
<button>Button</button>
</div></div></div>

Answer 2

.parent {
width: 100%;
display: flex;
max-width: 465px;
margin: 0 auto;
}
.button {
   text-align: center;
 }