html - Setting span alignment inside button -

i have 2 spans inside button . im trying set 1 span ( has text) left of button , other span ( has caret) right of button. both spans appears @ center. can help

.caret {    display: inline-block;    width: 0;    height: 0;    margin-left: 2px;    vertical-align: middle;    border-top: 4px solid #000000;    border-right: 4px solid transparent;    border-bottom: 0 dotted;    border-left: 4px solid transparent;    content: "";      }

<button type="button" style="width:300px;"><span style="text-align:left">selected all</span><span style="text-align:right;" class="caret"></span></button>

demo http://jsfiddle.net/887r8rav/

text-align won't work in case because there no text span have class caret. you've use float:right property, since we'll use float property we've clear float well; child elements won't affected./

to make align caret text you've play position:relative well. no need add inline css. check jsbin demo

.caret {    display: inline-block;    width:0px;    height:0px;    vertical-align: middle;    border-top: 4px solid #000000;    border-right: 4px solid transparent;    border-bottom: 0 dotted;    border-left: 4px solid transparent;    float:right;     content: "";     position:absolute;    right:0;    top:45%;  }  button{display:block;width:300px; text-align:left; overflow:hidden; position:relative;}

<button type="button">    <span>selected all</span>    <span class="caret"></span>  </button>

update:

you no need add span in code, can achieve using 1 span tag , using :after pseudo element.

span:after{     content: "";     position:absolute;    right:0;    top:45%;     vertical-align: middle;    border-top: 4px solid #000000;    border-right: 4px solid transparent;    border-bottom: 0 dotted;    border-left: 4px solid transparent;    display:inline-block;  }      button{display:block;width:300px; text-align:left; overflow:hidden; position:relative;}

<button type="button">    <span>selected all</span>  </button>