Dynamic Justified Logo Text - html

Question

I am trying to make a logo using css formatted text but I want the text to dynamically change and fit the DIV container (which is 1/3 of the page width) as it changes size and for the lines of text to expand to fill the width of the DIV right up to the left and right sides.
Currently I have the following HTML:
<div id="logo_container">
<span class="logo_name"> James Mitchell</span>
<span class="logo_title"> Consultant ENT Surgeon</span>
<span class="logo_website"> enthealth.co.uk</span>
</div>
and CSS:
#logo_container{
float:left;
height:10vw;
width:calc(100% / 3);
margin:0;
}
.logo_name{
font-family: 'Catamaran', sans-serif;
font-size:3vw;
line-height:2vw;
font-weight:100;
color:white;
}
.logo_title{
font-family: 'Catamaran', sans-serif;
font-weight:100;
font-size:1.69vw;
line-height:0.5vw;
color:white;
}
.logo_website{
font-family: 'Catamaran', sans-serif;
font-weight:500;
line-height:1.5vw;
font-size:2vw;
color:white;
letter-spacing: 0.3vw;
}

Answer 1

If you don't mind changing you html, you can try this:
body {
background: black;
}
#logo_container > div:after {
/*this is what I have added*/
content: "";
display: inline-block;
width: 100%;
}
#logo_container {
float: left;
height: 10vw;
width: calc(100% / 3);
margin: 0;
text-align: justify; /* this line is new too*/
}
.logo_name {
font-family: 'Catamaran', sans-serif;
font-size: 3vw;
line-height: 2vw;
font-weight: 100;
color: white;
}
.logo_title {
font-family: 'Catamaran', sans-serif;
font-weight: 100;
font-size: 1.69vw;
line-height: 0.5vw;
color: white;
}
.logo_website {
font-family: 'Catamaran', sans-serif;
font-weight: 500;
line-height: 1.5vw;
font-size: 2vw;
color: white;
letter-spacing: 0.3vw;
}
#logo_container > div {
padding-bottom: 5px;
}
<div id="logo_container">
<div class="auto logo_name">J a m e s M i t c h e l l</div>
<div class="auto logo_title">C o n s u l t a n t E N T S u r g e o n</div>
<div class="auto logo_website">e n t h e a l t h . c o . u k</div>
</div>
Other wise you can just play with the letter-spacing property for each line

Answer 2

I made a try, not sure wether it's what you want.
Only tested with Chrome.
Had to change span to divs...
Hope this helps : JsFiddle
<div id="logo_container">
<div class="auto logo_name"> James Mitchell</div>
<div class="auto logo_title"> Consultant ENT Surgeon</div>
<div class="auto logo_website"> enthealth.co.uk</div>
</div>
body {
background-color:black;
}
div.auto {
height:33.33%;
display:table-row;
border: 1px solid yellow;
}
#logo_container {
float:left;
height:10vw;
width:calc(100% / 3);
margin:0;
border: 1px solid red;
display:table;
}
.logo_name{
font-family: 'Catamaran', sans-serif;
font-size:4.5vw;
font-weight:100;
color:white;
}
.logo_title{
font-family: 'Catamaran', sans-serif;
font-weight:100;
font-size:1.69vw;
color:white;
}
.logo_website{
font-family: 'Catamaran', sans-serif;
font-weight:500;
font-size:2vw;
color:white;
letter-spacing: 0.3vw;
}