Выравнивание строчных элементов

by SerGen

HTML

<div class="wrap">
	<div class="item"><div class="name">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem a amet mollitia non sapiente officia odit ipsum ipsam assumenda sequi debitis nemo ducimus ex blanditiis atque! Praesentium voluptatibus dolorem cum.
		</div><div class="price">
			<div class="current">10.23 руб.</div>
	</div></div><div class="item"><div class="name">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium voluptatibus dolorem cum. Voluptatem a amet mollitia non sapiente officia odit ipsum ipsam assumenda sequi debitis nemo ducimus ex bibus dolorem cum.
		</div><div class="price">
			<div class="old">11.52 руб.</div>
			<div class="current">10.23 руб.</div>
			<div class="new">10.23 руб.</div>
	</div></div><div class="item"><div class="name">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem a amet mollitia non sapiente officia odit ipsum ipsam assumenda sequi debitis nemo ducimus ex blanditiis atque! Praesentium voluptatibus dolorem cum.
		</div><div class="price">
			<div class="current">10.23 руб.</div>
	</div></div><div class="item"><div class="name">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div><div class="price">
			<div class="old">11.52 руб.</div>
			<div class="current">10.23 руб.</div>
	</div></div><div class="item"><div class="name">
			Lorem ipsum dolor ipsam assumenda sequi debitis nemo sit amet, consectetur adipisicing elit. Voluptatem a amet mollitia ipsam assumenda sequi debitis nemo non sapiente officia odit ipsum ipsam assumenda sequi debitis nemo ducimus ex blanditiis atque! Praesentium voluptatibus dolorem cum.
		</div><div class="price">
			<div class="current">10.23 руб.</div>
			<div class="current">10.23 руб.</div>
	</div></div><div class="item"><div class="name">
			Voluptatem a amet mollitia non sapiente officia odit ipsum ipsam assumenda sequi debitis nemo ducimus ex blanditiis atque! Lorem ipsum dolor sit amet, consectetur...

CSS

.price {
    font-weight: bold;
}
.price .old {
    color: red;
}
.price .current {
    color: orange;
}
.price .new {
    color: green;
}


.wrap,
.name,
.price {
    display: inline-block;
}

.item {
    display: inline;
}
.name,
.price {
    width: 20%;
}
.name {
    padding-bottom: 4em;
    vertical-align: top;
    word-wrap: break-word;
}
.price {
    margin-left: -20%;
    vertical-align: bottom;
}

JavaScript

/*!
 * Отсюда — http://chikuyonok.ru/2011/04/inline-vertical-align/
 *
 * Возможности:
 * — две части элемента оказываются выровнены по вертикали сверху и снизу,
 * — элементу можно указывать процентную ширину
 *
 * Недостатки:
 * — элемент должен быть строчным,
 * — отступ у верхней части нельзя сделать равным самой высокой нижней части в строке с элементами, отчего будет фиксированным
 */