Skip to content

Instantly share code, notes, and snippets.

@alice-liu
Created April 16, 2014 18:36
Show Gist options
  • Save alice-liu/10918260 to your computer and use it in GitHub Desktop.
Save alice-liu/10918260 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
.form
.cell1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat, arcu at molestie iaculis, enim orci pharetra turpis, sed ultrices tortor nunc ac orci. Quisque pellentesque enim et euismod facilisis. Vestibulum sed urna vel dolor imperdiet consectetur nec non arcu. Nunc augue tortor, vulputate in sem vitae, vulputate bibendum tellus.
.cell2
blah blah
// ----
// Sass (v3.2.18)
// Compass (v0.12.4)
// ----
.form {
display: table;
margin: 0 auto;
}
.row {
display: table-row;
}
%cell {
box-sizing: border-box;
display: table-cell;
border-left: 1px solid blue;
width: 380px;
vertical-align: middle;
&:first-child {
border-left: 0;
}
}
.cell1 {
@extend %cell;
padding-right: 60px;
}
.cell2 {
@extend %cell;
text-align: center;
}
.form {
display: table;
margin: 0 auto;
}
.row {
display: table-row;
}
.cell1, .cell2 {
box-sizing: border-box;
display: table-cell;
border-left: 1px solid blue;
width: 380px;
vertical-align: middle;
}
.cell1:first-child, .cell2:first-child {
border-left: 0;
}
.cell1 {
padding-right: 60px;
}
.cell2 {
text-align: center;
}
<div class='form'>
<div class='cell1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat, arcu at molestie iaculis, enim orci pharetra turpis, sed ultrices tortor nunc ac orci. Quisque pellentesque enim et euismod facilisis. Vestibulum sed urna vel dolor imperdiet consectetur nec non arcu. Nunc augue tortor, vulputate in sem vitae, vulputate bibendum tellus.
</div>
<div class='cell2'>
blah blah
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment