I can't find a way to remove the 13px of white space under the image. I would like that the div is the same size of the image, but responsive. I tried to add padding and margin, but nothing changes. Thank you!
screenshot
html, body {
font-family: "Helvetica";
height: 100vh;
margin: 0;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.content-white {
background-color: #fff;
color: #000;
width: 100%;
text-align: center;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
min-width: 320px;
max-width: 1220px;
}
/* image grid */
#css-table {
display: table;
}
#css-table .col {
display: table-cell;
width: 33%;
}
.clearboth {
clear: both;
}
.cube {
vertical-align: middle;
font-size: 50px;
border: 1px solid #000;
}
.cube-text {
}
.cube img {
width:100%;
}
.cdesc {
font-family: "Helvetica Light";
font-size: 16px;
}
<div class="flex-center position-ref">
<div id="css-table" class="content-white">
<div>
<div class="col cube">
<img src="http://placehold.it/400x400" />
</div>
<div class="col cube cube-text">
TEXT
<p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p>
</div>
<div class="col cube">
<img src="http://placehold.it/400x400" />
</div>
<div class="clearboth"></div>
<div class="col cube cube-text">
TEXT
<p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p>
</div>
<div class="col cube" >
<img src="http://placehold.it/400x400" />
</div>
<div class="col cube cube-text">
TEXT
<p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
Set the image to display: block or display: inline-block.
html, body {
font-family: "Helvetica";
height: 100vh;
margin: 0;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.content-white {
background-color: #fff;
color: #000;
width: 100%;
text-align: center;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
min-width: 320px;
max-width: 1220px;
}
/* image grid */
#css-table {
display: table;
}
#css-table .col {
float:left; /* Changed here */
width: 33%;
}
.clearboth {
clear: both;
}
.cube {
vertical-align: middle;
font-size: 50px;
border: 1px solid #000;
height:207.33px; /* Added a height */
}
.cube-text {
}
.cube img {
width:100%;
}
.cdesc {
font-family: "Helvetica Light";
font-size: 16px;
}
<div class="flex-center position-ref">
<div id="css-table" class="content-white">
<div>
<div class="col cube">
<img src="http://placehold.it/400x400" />
</div>
<div class="col cube cube-text">
TEXT
<p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p>
</div>
<div class="col cube">
<img src="http://placehold.it/400x400" />
</div>
<div class="clearboth"></div>
<div class="col cube cube-text">
TEXT
<p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p>
</div>
<div class="col cube" >
<img src="http://placehold.it/400x400" />
</div>
<div class="col cube cube-text">
TEXT
<p class="cdesc">Lorem ipsum dolor sit amet <br/> Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
Related
I could get the result I want in many other ways, but I want to understand if it is possible to fix the layout while keeping the grid system.
Check the result first to get a better understanding
$(document).ready(function() {
$('#opt1').on('click', function() {
$('.item').css('grid-template-columns', 'minmax(110px, 1fr) auto');
});
$('#opt2').on('click', function() {
$('.item').css('grid-template-columns', 'minmax(110px, 1fr) max-content');
});
$('#opt3').on('click', function() {
$('.item').css('grid-template-columns', 'auto 1fr');
});
});
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px 25px;
margin-top: 25px;
}
.item {
position: relative;
display: grid;
grid-template-columns: minmax(110px, 1fr) auto;
background-color: #2f3138;
color: #ffffff;
padding: 15px;
}
.description {
display: grid;
grid-template-rows: auto 25px;
}
.price {
width: 100%;
font-size: 22px;
line-height: 25px;
text-align: right;
}
/* styles not important */
.item::before {
position: absolute;
font-family: monospace;
font-size: 18px;
font-weight: bold;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border: solid 5px #2f3138;
top: -8px;
right: -8px;
}
.item:nth-child(1)::before {
content: "1";
}
.item:nth-child(2)::before {
content: "2";
}
.item:nth-child(3)::before {
content: "3";
}
.item:nth-child(4)::before {
content: "4";
}
input[type="button"] {
background-color: #000000;
border: solid 2px #2f3138;
color: #ffffff;
outline: none;
margin: 5px 15px 5px 0px;
padding: 5px 15px 8px 15px;
font-family: monospace;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="opt1" type="button" value="Original: minmax(110px, 1fr) auto" />
<input id="opt2" type="button" value="option 2: minmax(110px, 1fr) max-content" />
<input id="opt3" type="button" value="option 3: auto 1fr" />
<div class="container">
<div class="item">
<img src="https://placeimg.com/100/120/any" />
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/100/121/any" />
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
</div>
The layout represents a list of items. The HTML is generated on the server side, and I can have an item with the image and an item without an image. My goal is to get all items with the text always left aligned and the price on the right.
The key is this grid-template-columns: minmax (110px, 1fr) auto; the text will be auto with the image and 1fr without image. It always occupies the space it needs, but in item 3 the text is short and space it needs is little, I would like it to extend as in item 1.
The javascript part to show some attempts that still generate non optimal results.
I hope I was clear.
Thank you
Rely on implicit grid creation. Define your template for the text and price only then an extra column will be created for the image if there:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 25px;
}
.item {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-auto-columns: 110px; /* this is the width of the extra column */
background-color: #2f3138;
color: #ffffff;
padding: 15px;
}
img {
grid-column-end:-2; /* create an implicit column at the beginning */
}
.description {
display: grid;
grid-template-rows: auto 25px;
}
.price {
font-size: 22px;
line-height: 25px;
text-align: right;
}
/* styles not important */
.item::before {
position: absolute;
font-family: monospace;
font-size: 18px;
font-weight: bold;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border: solid 5px #2f3138;
top: -8px;
right: -8px;
}
.item:nth-child(1)::before {
content: "1";
}
.item:nth-child(2)::before {
content: "2";
}
.item:nth-child(3)::before {
content: "3";
}
.item:nth-child(4)::before {
content: "4";
}
input[type="button"] {
background-color: #000000;
border: solid 2px #2f3138;
color: #ffffff;
outline: none;
margin: 5px 15px 5px 0px;
padding: 5px 15px 8px 15px;
font-family: monospace;
cursor: pointer;
}
<div class="container">
<div class="item">
<img src="https://placeimg.com/100/120/any" />
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/100/121/any" />
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
</div>
I have 2 cards 50/50 split using flex. The flex items both have equal heights, but I'd like a child element of the item to fill the height of the parent. In the pen, this would mean the blue background color would expand to the height of its parent.
This question is very close but the background-clip: padding-box; doesn't solve the issue for me.
Online demo here: Code pen
.wrapper {
max-width: 70%;
margin: auto;
}
.cards-group {
display: flex;
.card {
flex: 1;
border: 1px solid #0074d9;
}
.card + .card {
margin-left: 30px;
}
}
.card-image {
img {
display: block;
border-radius: 3px;
margin-left: auto;
max-width: 90%;
}
} // .card-image
.card-section {
padding: 20px;
background-color: #7fdbff;
mix-blend-mode: multiply;
border-radius: 3px;
margin-top: -50px;
} // .card-section
<div class="wrapper">
<div class="cards-group">
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/350x150" alt="">
</div><!-- .card-image -->
<div class="card-section">
<h3 class="card-title">Title</h3>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<button type="button" class="card-button" onclick="location.href=''">Link</button>
</div><!-- .card-section -->
</div>
</div><!-- .card -->
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/350x150" alt="">
</div><!-- .card-image -->
<div class="card-section">
<h3 class="card-title">Title</h3>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<button type="button" class="card-button" onclick="location.href=''">Link</button>
</div><!-- .card-section -->
</div>
</div>
<!-- .card -->
</div>
</div>
You can do that by adding display: flex; on .card :
.card {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid #0074d9;
}
And then telling your .card-section to take the remaining space with flex: 1 :
.card-section {
padding: 20px;
background-color: #7fdbff;
mix-blend-mode: multiply;
border-radius: 3px;
margin-top: -50px;
flex: 1;
}
.wrapper {
max-width: 70%;
margin: auto;
}
.cards-group {
display: flex;
}
.cards-group .card {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid #0074d9;
}
.cards-group .card + .card {
margin-left: 30px;
}
.card-image img {
display: block;
border-radius: 3px;
margin-left: auto;
max-width: 90%;
}
.card-section {
padding: 20px;
background-color: #7fdbff;
mix-blend-mode: multiply;
border-radius: 3px;
margin-top: -50px;
flex: 1;
}
<div class="wrapper">
<div class="cards-group">
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<!-- .card-image -->
<div class="card-section">
<h3 class="card-title">Title</h3>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<button type="button" class="card-button" onclick="location.href=''">Link</button>
</div>
<!-- .card-section -->
</div>
</div>
<!-- .card -->
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<!-- .card-image -->
<div class="card-section">
<h3 class="card-title">Title</h3>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<button type="button" class="card-button" onclick="location.href=''">Link</button>
</div>
<!-- .card-section -->
</div>
</div>
<!-- .card -->
</div>
</div>
I am trying to develop a page footer in angular 6. I am using angular material and not using bootstrap.
Can anyone help to change this code into the angular material syntax?
I want to convert this footer into the full responsive Material UI design.
If possible then can I make this footer as responsive as well?
.app-footer {
margin-top: 2em;
text-align: center;
vertical-align:middle;
min-height: 100%
}
.app-footer-link {
line-height: 1.5em;
}
.app-footer-link p {
margin: 0;
}
.row/*:after*/ {
display: flex;
/*content: "";
display: table;
clear: both;*/
}
.firstrow/*:after*/ {
display: flex;
/*content: "";
display: table;
clear: both;*/
padding-top: 20px;
}
.column {
flex: 25%;
/*width:20%;*/
float:left;
font-size:12px;
}
.headingcolumn {
flex: 25%;
/*width:20%;*/
float:left;
font-size:18px;
/*line-height:12px;*/
}
.maincolumnleft {
flex: 50%;
/*width: 50%;*/
float: left;
}
.maincolumnright {
/*flex: 50%;*/
width: 50%;
float: right;
}
.fullcolumn {
width: 100%;
/*flex:100%;*/
font-size: 12px;
text-align: center;
vertical-align: middle;
}
.heading{
font-size:18px;
}
#media screen and (max-width: 600px) {
.column {
/*flex:100%;*/
width: 100%;
}
.headingcolumn {
/*flex: 100%;*/
width: 100%;
}
.maincolumnleft {
/*flex: 100%;*/
width: 100%;
}
.maincolumnright {
/*flex: 100%;*/
width: 100%;
}
}
------------footer.component.html---------------------------
<footer class="app-footer">
<div class="app-footer-link">
<div class="firstrow">
<div class="headingcolumn"></div>
<div class="headingcolumn">B</div>
<div class="headingcolumn">S</div>
<div class="headingcolumn">About Us</div>
<div class="headingcolumn">C Service</div>
</div>
<div class="row">
<div class="column"></div>
<div class="column">New Acc</div>
<div class="column">New Acc</div>
<div class="column">About</div>
<div class="column">Help</div>
</div>
<div class="row">
<div class="column"></div>
<div class="column">Cat</div>
<div class="column">St</div>
<div class="column">Sit</div>
<div class="column">Contact Us</div>
</div>
<div class="row">
<div class="fullcolumn">
<span class="heading">Follow:</span>
</div>
</div>
<div class="row">
<div class="fullcolumn">
Copyright © {{getYear()}}
</div>
</div>
</div>
</footer>
Updated
footer{
background: tomato;
display: flex;
flex-direction: column;
flex-wrap: wrap; /*flex items will wrap onto multiple lines, from top to bottom.*/
padding: 20px;
}
.section-top{
background: yellow;
display: flex;
justify-content: center; /*items are centered along the line*/
padding: 20px 0;
}
.section-bottom{
background: blue;
text-align: center;
padding: 15px 0;
}
.col{
margin: 0 15px;
width: 25% /*optional*/
}
#media all and (max-width: 600px){ /*style if screen size is <600px*/
.section-top{
flex-direction: column;
}
.col{
text-align: center;
width: 100%;
margin: 0
}
}
<footer>
<section class="section-top">
<div class="col">
<h3>Title</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Line 3</div>
</div>
<div class="col">
<h3>Title</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Line 3</div>
</div>
<div class="col">
<h3>Title</h3>
<div>Line 2</div>
<div>Line 3</div>
</div>
<div class="col">
<h3>Title</h3>
<div>Line 2</div>
</div>
</section>
<section class="section-bottom">
<div>Follow</div>
<div>Copy right</div>
</section>
</footer>
I want to make a flexbox grid for cards with one big image on left and two right images vertically aligned. Everything is fine and aligned for desktop at 1280px but when images stretch for responsive view, the image on the left is stretching more rapidly and cards are no more vertically aligned.
Here a codepen illustrating the problem:
https://codepen.io/actik/pen/xaZqmG
.wrap {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.flex {
display: flex;
box-sizing: border-box;
align-items: flex-start;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.structure-100 {
flex: 1 100%;
}
.structure-50 {
flex: 1 50%;
}
.content {
color: #fff;
background-color: #aa0000;
width: 100%;
flex: 1 100%;
}
.element_left {
flex: 1 50%;
padding-right: 15px;
padding-bottom: 30px;
}
.element_right {
flex: 1 50%;
padding-left: 15px;
padding-bottom: 30px;
}
.content-text {
padding: 0 10px;
}
img {
max-width: 100%;
height: auto;
align-self: center;
}
<div class="wrap">
<div class="flex row structure-100">
<div class="flex col structure-50">
<div class="flex element_left">
<div class="content">
<img src="http://www.placebacon.net/625/875/" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
<div class="flex col structure-50">
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
</div>
</div>
I made a lot of different tests and can't understand this behavior, any tips welcome, thanks for your help !
Editing : Here the version at 1280px working (title cards are aligned at the bottom) and the second version when reducing width, bottom of the 2 images and title cards are no more aligned. I want the red part add space at his bottom if necessary but keep image and title aligned.
working version
not working
Big image is squashed.
As I understood from our talk in the comments, your issue that the left section with the 'big' image (the images aren't present in the snippet you provided, they're present in the CodePen demo that tou do provided its link) isn't stretching as supposed, and that because in yourCSS you gave the .flex class a rule of align-items: flex-start; which means that the element of the flex container should be placed on the top (vertical), thus, it doesn't let the element to stretch, instead, you just have to replace this line align-items: flex-start; with align-items: stretch; in the .flex class, so that class becomes:
.flex {
display: flex;
box-sizing: border-box;
align-items: stretch;
}
And here's a runnable snippet:
$gutter: 30px;
.wrap{
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.flex {
display: flex;
box-sizing: border-box;
align-items: stretch;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.structure-100 {
flex: 1 percentage(1/1);
}
.structure-50 {
flex: 1 percentage(1/2);
}
.content {
color: #fff;
background-color: #aa0000;
width: 100%;
flex: 1 100%;
}
.element_left .content {
display: flex;
flex-flow: column wrap;
}
.element_left {
flex: 1 percentage(1/2);
padding-right: $gutter / 2;
padding-bottom: $gutter;
}
.element_right {
flex: 1 percentage(1/2);
padding-left: $gutter / 2;
padding-bottom: $gutter;
}
.content-text {
padding: 0 10px;
}
.element_left .content .content-text {
flex-grow: 0;
margin-top: auto;
}
img {
max-width: 100%;
height: auto;
}
.element_left .content img {
width: 100%;
flex-grow: 1;
align-self: flex-start;
}
<div class="wrap">
<div class="flex row structure-100">
<div class="flex col structure-50">
<div class="flex element_left">
<div class="content">
<img src="http://www.placebacon.net/625/875/" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
<div class="flex col structure-50">
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
<div class="flex element_right">
<div class="content">
<img src="http://www.placebacon.net/625/360" alt="">
<div class="content-text">
<h2>Card title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum lacus vitae aliquam ullamcorper.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Hope I pushed you further.
I've this code
.row {
width: 600px;
}
.row div {
display: inline-block;
width: 50%;
float: left;
}
.text {
background-color: lightblue;
}
<div class="row">
<div class="image">
<img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>
I want my div .text to have the same height as the image.
I want it responsive no I can't set a height to .text
Thanks for your help !
One option is with Flexbox
body, html {
margin: 0;
padding: 0;
}
.row {
width: 600px;
display: flex;;
}
.text {
background-color: lightblue;
}
img {
vertical-align: top;
}
<div class="row">
<div class="image"><img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>
Other one is CSS table
body, html {
margin: 0;
padding: 0;
}
.row {
width: 600px;
display: table;
}
.text {
background-color: lightblue;
display: table-cell;
vertical-align: top;
}
.image {
display: table-cell;
vertical-align: top;
}
img {
vertical-align: top;
}
<div class="row">
<div class="image"><img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>
Here is one way using display-table:
.row {
width: 600px;
display: table;
}
.row > div {
width: 50%;
display: table-cell;
vertical-align: top; /* or 'middle' or 'bottom' etc. */
}
.text {
background-color: lightblue;
}
.image img {
display: block;
}
<div class="row">
<div class="image">
<img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>
Here is one solution which just uses height:auto; :
.row {
width: 600px;
height: auto;
background-color: lightblue;
}
.image, .text {
display: inline-block;
width: 49%;
}
.image {
background-color: white;
}
.text, .image img {
vertical-align:top;
}
<div class="row">
<div class="image">
<img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>