Span with paragraph to create two columns

[OAFC_Rob]

Hi,

 

I have a paragraph of text that basically needs a label that is split into two columns for 100% width and 100% height. The label column needs to be a set minimum withd of 6.5em to cope for the longest labelling. I have tried a few different things and cannot figure out the best course of action. This is the best I've got so far;

<p>
<span>My Label</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

p {
width: 100%;
}
p span {
min-width: 6.5em;
float: left;
min-height: 3em; 
}

The issue I have is I can set the height to a fix width which give me my desired effect, but it isn't responsive at all any help would be appericated.

[cyberRobot]

Have you considered media queries to adapt the CSS as needed?

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

[possien]

You might want to encapsulate the span and p with a div.  I put a calc function to p width also. I tried this and it seems to work:

p {
float:left;
width: 100%;
 width: calc(100% - 6.5em);
}

p span {
min-width: 6.5em;
float: left;
min-height: 7em; 
}

.together{min-height:3em;}

Something like this:

<div class="together">
<p>
<span>My Label</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
</p>
</div>
<div class="together">
<p>
<span>My Label</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

Edited March 28, 2014 by possien