Доброго времени суток. Не знаю каким макаром реализовать вот такой вот фон. . Вообще ума не приложу. пробовал переводить этот элемент в display:inline получаеться вот такая штуковина . Прошу помогите, всю голову себе сломал
<style>
.padded-multiline {
text-align:right;
line-height: 1.3;
padding: 2px 0;
border-right: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline p {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline p span {
position: relative;
right: -10px;
}
</style>
<div class="padded-multiline">
<p>
<span>
How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element?
</span>
</p>
</div>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.text {
text-align: right;
width: 250px;
}
.text span {
background: yellow;
border: 1px solid yellow;
outline: 7px solid yellow;
}
</style>
</head>
<body>
<div class="text">
<span>How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent
lines of an inline text element? How do I add padding to subsequent lines of an inline text element?
How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent
lines of an inline text element? How do I add padding to subsequent lines of an inline text element?</span>
</div>
</body>
</html>
. Вообще ума не приложу. пробовал переводить этот элемент в display:inline получаеться вот такая штуковина 
. Прошу помогите, всю голову себе сломал
