Span Multiline Start From Same Position

i have html code like this : Scope of WorkIdea Processing, Photography, Magazine

Solution 1:

You can use display: table values, for example.

<style>.ga_sep{
    height:10px;
    width:1px;
    border-left:1px solid #c9caca;
    margin:1px8px08px;
    position: relative;
    top:1px;
    display:inline;
}
div {display: table}
span {display: table-cell}
span:first-child {white-space: nowrap}
</style><div><spanstyle="color:#c9caca">Scope of Work</span><spanclass="ga_sep"></span><span>Idea Processing, Photography, Magazine Advertising, Idea Processing, Photography, Magazine, Advertising, Idea Processing, Photography, Magazine Advertising</span></div>

http://jsfiddle.net/f7hhx5qe/1/

Solution 2:

You can use display inline-block like this..

Get rid of that border span also.. you don't need it.

Fiddle

html:

<spanstyle="color:#c9caca">Scope of Work</span><span>Idea Processing, Photography, Magazine Advertising, Idea Processing, Photography, Magazine, Advertising, Idea Processing, Photography, Magazine Advertising</span>

css:

span              { display:inline-block; vertical-align:top;}
span:nth-child(1) { border-right:1px solid #c9caca; padding:08px00; margin:08px00; font:normal 13px arial;}
span:nth-child(2) { width:calc(100% - 103px);}

** Notice: I get 103px from calculating the overall width (width+padding+border+margin) of the first span.. If you don't know the width beforehand you could use percentage to a certain extent.. to get the absolute liquidity effect down to a very narrow width, in that case the answer above (display:table) might be more suitable.