Bootstrap div placement - html

Question

<div class="row">
<div class="col-xs-6">
<img src="img.png" width="100%" />
</div>
<div class="col-xs-6">
<div class="row"><p>Main text</p></div>
<div class="row"><p>More...</p></div>
</div>
</div>
I need this result:
So I need a picture which takes up 50% of the screen width and then a big title which is centered horizontally, but vertically is on top; and "more..." text which is to the right horizontally, but on the bottom vertically. How do I manage to do this? Can someone help me, please?

Answer 1

Here is your solution: use display flex to make both columns have same height, then use position relative ad absolute to position your columns
.title{
background-color: red;
text-align: center;
}
.title h1{
width: 100%;
}
.description{
background-color: yellow;
}
/*NEW*/
.row{
display:flex;/*makes col have same height*/
}
.details{
position: relative !important;
}
.description{
position: absolute !important;
bottom: 0;
}
.description p{
width: 100%;
text-align: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row col-xs-12">
<div class="col-xs-6">
<img src="https://placehold.it/150/150" width="100%" />
</div>
<div class="col-xs-6 details">
<div class="row col-xs-12 title">
<h1>Main text</h1>
</div>
<div class="row col-xs-12 description">
<p>More...</p>
</div>
</div>
</div>

Answer 2

Is it this you mean?
.title{
background-color: red;
text-align: center;
}
.description{
background-color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row col-xs-12">
<div class="col-xs-6">
<img src="https://placehold.it/150/150" width="100%" />
</div>
<div class="col-xs-6 details">
<div class="row col-xs-12 title">
<h1>Main text</h1>
</div>
<div class="row col-xs-12 description">
<p>More...</p>
</div>
</div>
</div>