Css Width fit contents

Question

I have a html page like the example in the js fiddle. I want to make each element set the width automatically to fit the child automatically. Is there anyway to do this without upsetting the whole page?

html

</fieldset>
<div id = 'buttons'>
  <button onclick="$('span.hidden_select').toggle(1000);">Test</button>
   <span class="hidden_select">
    <form method="post" action="/pcr_process_batch/reassign_batch">
    Choose Person :
      <select id="person" name="person">
        <option value="1249">Person 1</option>
        <option value="307">Person 2</option>    
        <option value="708">Person 3</option>
        <option value="1331">Person 4</option>
        <input type="submit" value="submit" name="commit">
     </form>
   </span>
</div>

CSS

fieldset{
padding: 2px;
background-color:#5CE68A; 
margin-top: 20px;
float:left;
width:50%;
 }

  div#buttons{
border:1px solid black;
width:inherit;
max-height:inherit;
 }

 span.hidden_select{
margin-top:10px;
margin-right:0;
max-width:inherit;
display:none;
 }

 span.hidden_select form{
width:auto;
overflow:visible;
    border:1px solid black;
 } 

http://jsfiddle.net/striderinc/6G72y/6/

Answer 1

You can apply float:left on the div.

jsFiddle example

div#buttons {
    border:1px solid black;
    width:inherit;
    max-height:inherit;
    float:left;
}

Note that depending on your complete code, you may need to clear the float on the HTML that comes after this by applying clear:left.

Answer 2

just apply position absolute to you span {hidden_select}

   span.hidden_select
{
    margin-top:10px;
    margin-right:0;
    max-width:inherit;
    display:none;
    position:absolute;
    /*added this to make it look in a same line*/
    top:-3px;
}

here is fiddel