Title and Subtitle getting mixed up - css

Question

I have a title and subtitle displaying in a div.
I am facing an issue when either of the title or subtitle are longer they get mixed up otherwise with shorter titles and subtitles its not an issue.
To display the title my css is
.sch-task-name {
margin: 5px 0;
}
and to display subtitle
.sch-tool-text-activity {
position: relative;
top: -44px;
font-size: 13px;
margin-left: 1px;
color: blue;
}
.sch-task-inner {
height: inherit;
overflow: hidden;
padding: 27px 2px 7px 8px;
}
.sch-tool-ct {
float: left;
width: 100%;
margin-top: 7px;
padding-right: 20px;
}
html
<div class="sch-task-inner">
<span class="sch-task-name"> Ticket Under Needs Information 2</span>
<div class="sch-tool-ct">
<span class="sch-tool-text-activity">Kanban Deliverable</span>
</div>
</div>
Here sch-task-name displays title and sch-tool-text-activity displays subtitle.
I am new to css and dont know much of it.
Would appreciate any help!Thanks in advance!

Answer 1

If your goal is to get sch-task-name to display underneath sch-tool-text-activity without rearranging the content in the HTML, then you may want to use the order property of flexible items.
You'll need to set the parent container's display to 'display:flex' first. Then, since you want them to stack, you'll have to allow the items to flow onto multiple links by setting 'flex-wrap:wrap' (still on the parent container). Lastly, you'll set the order of the spans to 'order:1' and 'order:2' to rearrange their order, with '1' displaying first.
Updated fiddle: https://jsfiddle.net/ph0rn16w/1/
.sch-task-name {
margin: 5px 0;
font-size:20pt;
order:2;
}
.sch-tool-text-activity {
position: relative;
//top: -44px;
font-size: 13px;
margin-left: 1px;
color: blue;
}
.sch-task-inner {
height: inherit;
overflow: hidden;
padding: 27px 2px 7px 8px;
display:flex;
flex-wrap:wrap;
}
.sch-tool-ct {
float: left;
width: 100%;
margin-top: 7px;
padding-right: 20px;
order:1;
}