HTML & CSS with div problems - html

Question

I am beginner in CSS & HTML and still learning on it.
I want to get this result:
can anyone help me to solve my problem?
Here is my code:
body {
background: black;
}
.process {
background-color: rgba(255, 255, 255, 0.15);
height: 255px;
width: 630px;
}
.process img {
text-align: center;
display: block;
padding-top: 40px;
padding-bottom: 33px;
}
.lockup {
text-align: center;
}
.lockup h2 {
color: #5db442;
font-size: 26px;
font-weight: 100;
text-transform: uppercase;
}
.sign {
}
.fill {
}
.fill p {
color: white;
}
<div class="process">
<img src="http://s33.postimg.org/m5kmwz9ov/upanddown.png"/>
<div class="lockup">
<div class="sign">
<img src="http://s33.postimg.org/h2h988fdb/signup.png" />
</div>
<div class="fill">
<h2>Signup Process</h2>
<p>1. User enters email address</p>
<p> 2. Clicks on "Sign up for free"</p>
</div>
</div>
</div>
please help thanks.

Answer 1

Please have look at following jsFiddle, I hope it works for you.
jsFiddle Link
<div class="process"> <img src="http://s33.postimg.org/m5kmwz9ov/upanddown.png"/>
<div class="lockup">
<div class="sign"> <img src="http://s33.postimg.org/h2h988fdb/signup.png" /> </div>
<div class="fill">
<h2>Signup Process</h2>
<p>1. User enters email address</p>
<p> 2. Clicks on "Sign up for free"</p>
</div>
</div>
</div>
<style>
body {
background: black;
}
.process {
background-color: rgba(255, 255, 255, 0.15);
height: 255px;
width: 630px;
margin-left: auto;
margin-right: auto;
}
.process img {
/*text-align: center;
display: block;*/
padding-top: 40px;
padding-bottom: 33px;
}
.lockup {
text-align: center;
}
.lockup h2 {
color: #5db442;
font-size: 26px;
font-weight: 100;
text-transform: uppercase;
}
.sign {
float: left;
width: 43%;
text-align: right;
}
.fill {
float: left;
text-align: left;
padding-left: 4%;
}
.fill p {
color: white;
}
</style>

Answer 2

Look below code or Here is jsfiddle link : https://jsfiddle.net/hmxbes8u/2/
I hope this will help you.
HTML
<div class="process">
<img src="http://s33.postimg.org/m5kmwz9ov/upanddown.png"/>
<div class="lockup">
<div class="sign">
<img src="http://s33.postimg.org/h2h988fdb/signup.png" />
</div>
<div class="fill">
<h2>Signup Process</h2>
<p>1. User enters email address</p>
<p> 2. Clicks on "Sign up for free"</p>
</div>
</div>
</div>
CSS:
body {
background: black;
}
.process {
background-color: rgba(255, 255, 255, 0.15);
height: 255px;
width: 630px;
position:relative;
text-align: center;
}
.process > img {
text-align: center;
display: inline-block;
padding-top: 40px;
padding-bottom: 33px;
}
.lockup {
text-align: center;
position:absolute;
top:100px;
right:0;
left:0;
}
.lockup h2 {
color: #5db442;
font-size: 26px;
font-weight: 100;
text-transform: uppercase;
margin-top:0;
}
.sign {
display:inline-block;
vertical-align:top;
margin-right:30px;
}
.fill {
display:inline-block;
text-align:left;
}
.fill p {
color: white;
}