Exciting to create a playbook layout style, here's how it goes:
Name: Text starting here - unique style #1
text that moves to a new line with a different look - unique style #2
more text continuing on another new line - unique style #1
Longer Name: Text starting here - unique style #1
text that moves to a new line with a different look - unique style #2
more text continuing on another new line - unique style #1
The challenge lies in getting the style #2 text to start on a new line.
This is the code I'm using:
<div class="line">
<div class="level1">
<div class="name" >name:</div>
Text starting here - unique style #1
<span>text which should go in a new line with different style #2</span>
text continue here with another new line - unique style #1
</div>
</div>
<style type="text/css">
.line {
text-align: right;
font-size: 14px;
width: 477px;
margin: 0 auto;
}
.level1 {
display: inline-flex;
font-size: 14px;
line-height: 12px;
}
.name {
display: inline-block;
font-size: 14px;
width: 40px;
min-width: 50px;
text-align: left;
margin-left: 15px;
}
</style>
Despite setting these values, Style #2 always breaks into a new column rather than a new line. You can view an example on jsfiddle. It seems like "flex-inline" might be causing this issue. Are there any alternatives for this?