title: antd dropdown : selected value displaying outside the select
body: <p>I my code I am using ant Design (antd). In my drop down list I am using <code>&lt;span&gt;</code> tag to dispaly my listings as two columns. </p>
  
  <pre><code>&lt;Select value={'AccountID'} style={{'width':'212px','height':'32px'}}  placeholder="Select An Accounts"&gt;
                      &lt;Option disabled value='0'&gt;Select An Account&lt;/Option&gt;
                          {this.props.accountList.length &amp;&amp; this.props.accountList.map((value,index)=&gt;(
                            &lt;Option  value={value.AccountID} key={index}&gt;
                             {value.Name} &lt;span style={{float:'right'}}&gt; {value.TypeName} &lt;/span&gt;
                            &lt;/Option&gt;
                          ))}
                      &lt;/Select&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/cqvQr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cqvQr.png" alt="enter image description here"></a></p>
  
  <p>The problem is when I select a long option like <em>Freight and Shipping Costs</em>
  , after selecting <em>CostOfGoodsSold</em> is displayed outside the conttrol as shown below.
  <a href="https://i.stack.imgur.com/kKIlO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kKIlO.png" alt="enter image description here"></a></p>
  
  <p>As an alternate solution, </p>
  
  <p>If I increase the with of the select tag:-</p>
  
  <p>there is no space showing between the two values after selection. I need space between values.<a href="https://i.stack.imgur.com/W6K0N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W6K0N.png" alt="enter image description here"></a></p>
  
  <p>How to overcome this issue?
  PS: any other CSS not applied.
  Demo: <a href="https://codesandbox.io/s/m268vxq3x" rel="nofollow noreferrer">sandbox</a></p>