Position child div to the left of parent div? - html

Question

I have an image that has a width of 50% and a div with text that is 65% because I want the heading inside the div to overlap the image. But, the problem is that I don't want the other content inside the div to overlap the image - just the heading. I want the text and the button to be next to the image not on top of it.
But I can't seem to figure it out.
Here's a Codepen: https://codepen.io/tayanderson/pen/EbJZxy
.project {
height: 75vh;
margin: 15em 0;
position: relative;
.project-info {
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
width: 65%;
height: 100%;
right: 0;
h2 {
text-transform: initial;
color: #eee;
}
p {
font-weight: 300;
color: #ccc;
margin: 40px 0;
}
.project-desc {
width: 70%;
.button {display:inline-block;}
}
}
.project-img {
background-size: cover;
background-position: center;
height: 100%;
-webkit-filter: grayscale(100%) brightness(50%);
filter: grayscale(100%) brightness(50%);
width: 51.3%;
}
a {text-decoration:none;
color: #fff;}
#media only screen and (max-width: 768px) {
.project-info, .project-img {
width: 100%;
}
.project-info {
left: 0;
padding: 0 20px;
.project-desc>*{
width: 100% !important;
float: left !important;
}
p {display: none;}
}
}
}

Answer 1

You can try something like that using flexbox.
https://codepen.io/dakata911/pen/BmEpeB
.article {
width: 60%;
margin: 0 auto;
display: flex;
}
.article__image,
.article__text {
width: 50%;
}
.article__image {
background: url('http://www.country1067.com/wp-content/uploads/sites/28/2017/07/logoImage_4.jpg') center center no-repeat;
background-size: cover
}
.article__text {
padding: 12px;
background: #c3c3c3;
}
.article__text h2 {
margin-left: -96px;
color: #FFF;
font-size: 40px;
}

Answer 2

why don´t you make the two divs to 50% and give padding to project-info?
You need this attribute for do correctly the padding inside the div
*{
box-sizing:border-box;
}
Here you have the result
https://codepen.io/marcosefrem/pen/BmERmY

Answer 3

I think I understand what you are describing. Instead of using the percentages to position the items use position: relative instead and float the image (remember to put it first in the flow).
Check this out:
https://codepen.io/alexplummer/pen/eeoRmN
.project-info {
display: inline-block;
width: calc(50% - 10px);
height: 100%;
padding-left: 10px;
...
}
.project-img {
width: 50%;
float: left;
...
}