Making dynamic sized boxes
<p>I have a quiz that have four options to choose.
Every question have different options and sometimes an option have a long text that doesn't fit in my fixed size boxes (say <code>div</code>). 
I don't want to have largest possible box to prevent overflow in my boxes. I want to size my box depended on longest option that I have in current quiz and if every option is short enough use fixed sizes that I had.</p>

<p>this is my HTML markup:</p>

<pre><code>&lt;div id="options"&gt;
    &lt;div class="option 1"&gt;
        &lt;span class="optiontText"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="option 2"&gt;
        &lt;span class="optiontText"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="option 3"&gt;
        &lt;span class="optiontText"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="option 4"&gt;
        &lt;span class="optiontText"&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and this is CSS:</p>

<pre><code>#options{ width:800px;}
.option{width:380px; margin:10px;}
</code></pre>

<p>Text of optionTexts came from database and I want a jQuery function that size my boxes depended on size of text</p>
