How to make a block of text have the same width as the images rows in a liquid layout?

I have one block of text, that is the resume of a gallery.

The gallery has a liquid layout, that's to say, you can see 4 pictures to x pictures, let's say, 8 pictures, depending on the screen width.

My client want the block of text to be exactly the width of this layout, but as you will supponse, the images change their row independently from the block of text.

Can you see a solution? Here is the code, you can change it more or less if it fits well, important restriction it must be a liquid design:

 <div class="descrip">

                                    <span>lorem ipsum lorem 
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
                                </div>


                                <ul class="galeria">
    <li>
<a rel ="prettyphoto[1]" href="ipsum.jpg" title="">
<img src="ipsum4.jpg" alt="" height="120" /></a>
</li>
  <li>
<a rel ="prettyphoto[1]" href="ipsum.jpg" title="">
<img src="ipsum4.jpg" alt="" height="120" /></a>
</li>
  <li>
<a rel ="prettyphoto[1]" href="ipsum.jpg" title="">
<img src="ipsum4.jpg" alt="" height="120" /></a>
</li>

    </ul>

Solution

As indicated by @ggzone you'll need Javascript - and some extra changes to your code.

I made some changes to your code, and added a jQuery function - and it works:

http://pastebin.com/t8GxmWu9

Major change I had to do is to change the list into spans - otherwise width can't be detected...

Maybe there's a workaround for this, but I don't have immediate answer for this...

Hope it helps.