Как настроить ограничивающую рамку блочного элемента, чтобы она соответствовала плавающему элементу?

Например, я хочу, чтобы размер элемента h1 соответствовал размеру плавающего красного элемента div. Текст уже приспосабливается к плавающему элементу, но фон остается позади плавающего элемента.

Я знаю, что могу добавить правое поле к h1, но красный блок может быть переменной ширины, и я не могу иметь переменное поле.

CSS:

#redblock {            
    background: red;
    float: right;
    margin: 10px;
    width: 100px;
    height:100px;
}
#wrapper {
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    width: 300px;
}
p {
    background-color: #ffd;
}
h1 {
    background-color: #667788;
    font-size: 1.1em;
    margin: 10px 0;
}

HTML:

<div id="wrapper">
    <div id="redblock"></div>

    <h1>Test tEst teSt tesT</h1>

    <p>Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt
    tesT Test tEst teSt tesT Test tEst teSt tesT</p>
</div>

См. http://jsbin.com/ucili4.