nourza
Reputation: 2321
How can I make two span to start at the same line inside td table
I want the two spans inside the table to be align and to start at the same time
Here is image to understand more what i mean
.btContentHolder table td, .btContentHolder table th {
/* padding: 10px; */
counter-increment: step-counter;
margin-bottom: 10px;
position: relative;
padding-left: 2.5714em;
padding-top: 2em;
padding-right: .2em;
}
.pli{
position: absolute;
left: .3em;
top: 1.5em;
z-index: 100;
content: counter(step-counter);
background-color: #fff;
color: #2b6a83;
font-size: 1.4285em;
border: solid 1px #2b6a83;
border-radius: 50%;
width: 25px;
height: 25px;
line-height: 1.2em;
text-align: center;
}
.pli:hover{
background-color: #2b6a83;
color: #fff;
border: solid 1px #fff;
}
.cli{
position: absolute;
left: .3em;
top: 1.5em;
z-index: 100;
content: counter(step-counter);
background-color: #fff;
color: #e9736a;
font-size: 1.4285em;
border: solid 1px #e9736a;
border-radius: 50%;
width: 25px;
height: 25px;
line-height: 1.2em;
text-align: center;
}
.cli:hover{
background-color: #e9736a;
color: #fff;
border: solid 1px #fff;
}
.protd{
background-color: #2b6a831c;
}
.contd{
background-color: #ff000024;
}<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
<table>
<tbody style="padding-bottom: 20px;">
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd"><span class="pli">1</span><span style="font-size: 14pt; font-family: Krub;">One-on-one care tailored to meet unique preferences and needs.</span></td>
<td class="contd"><span class="cli">1</span><span style="font-size: 14pt; font-family: Krub;">When 24/7 care is required, the costs can be very high.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">2</span><span style="font-size: 14pt; font-family: Krub;">Remain in the comfort of their own home with a safe, familiar setting.</span></td>
<td class="contd"><span class="cli">2</span><span style="font-size: 14pt; font-family: Krub;">Managing caregivers and backup care planning requires continued family involvement.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">3</span><span style="font-size: 14pt; font-family: Krub;">The opportunity to choose the person who will be providing care.</span></td>
<td class="contd"><span class="cli">3</span><span style="font-size: 14pt; font-family: Krub;">Living in the home can lead to social isolation if there is little presence of family or friends.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">4</span><span style="font-size: 14pt; font-family: Krub;">The individual can get service from the same consistent caregiver.</span></td>
<td class="contd"><span class="cli">4</span><span style="font-size: 14pt; font-family: Krub;">The home may need to be modified for wheelchair accessibility or safety precautions.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">5</span><span style="font-size: 14pt; font-family: Krub;">Home care can cheaper depending on the skill level required and services can be combined to lower costs.</span></td>
<td class="contd"><span class="cli">5</span><span style="font-size: 14pt; font-family: Krub;">Fewer social activities may take place as opposed to care homes and facilities.</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6" style="width: 2%;"></div>
<div class="col-md-6" style="width: 49%;">
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">Assisted Living</span></h2>
<table>
<tbody>
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd"><span class="pli">1</span><span style="font-size: 14pt; font-family: Krub;">More affordable when 24/7 care is required.</span></td>
<td class="contd"><span class="cli">1</span><span style="font-size: 14pt; font-family: Krub;">Longer wait times to get admitted into an assisted living facility.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">2</span><span style="font-size: 14pt; font-family: Krub;">Allows the family to focus more on their relationship with their loved one.</span></td>
<td class="contd"><span class="cli">2</span><span style="font-size: 14pt; font-family: Krub;">Frequent changes to the staff mean one-on-care won’t be as consistent.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">3</span><span style="font-size: 14pt; font-family: Krub;">Residents have ample opportunities to socialize with others.</span></td>
<td class="contd"><span class="cli">3</span><span style="font-size: 14pt; font-family: Krub;">The quality of care can differ depending on the various care workers.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">4</span><span style="font-size: 14pt; font-family: Krub;">Family will not have to manage, schedule or hire care providers.</span></td>
<td class="contd"><span class="cli">4</span><span style="font-size: 14pt; font-family: Krub;">Residents may get kicked out of their assisted living home with little to no advanced notice.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">5</span><span style="font-size: 14pt; font-family: Krub;">The level of care can easily be increased as necessary.</span></td>
<td class="contd"><span class="cli">5</span><span style="font-size: 14pt; font-family: Krub;">Your loved one may simply not enjoy living in a group environment.</span></td>
</tr>
</tbody>
</table>Upvotes: 2
Views: 588
Answers (2)
ARNON
Reputation: 1217
It is not recommended to use styles attributes inside html, main because you have a css file, you put everything there.
I removed these elements from .pli and .cli:
position: absolute;
left: .3em;
top: 1.5em;
z-index: 100;
And I also added to make the buttons seem more like a circle. Here is the result:
.btContentHolder table td,
.btContentHolder table th {
counter-increment: step-counter;
margin-bottom: 10px;
padding-left: 2.5714em;
padding-top: 2em;
padding-right: 0.2em;
}
.pli {
content: counter(step-counter);
background-color: #fff;
color: #2b6a83;
font-size: 1.4285em;
border: solid 1px #2b6a83;
border-radius: 50%;
width: 25px;
height: 25px;
line-height: 1.2em;
text-align: center;
}
.pli:hover {
background-color: #2b6a83;
color: #fff;
border: solid 1px #fff;
}
.cli {
content: counter(step-counter);
background-color: #fff;
color: #e9736a;
font-size: 1.4285em;
border: solid 1px #e9736a;
border-radius: 50%;
width: 25px;
height: 25px;
line-height: 1.2em;
text-align: center;
}
.cli:hover {
background-color: #e9736a;
color: #fff;
border: solid 1px #fff;
}
.protd {
background-color: #2b6a831c;
}
.contd {
background-color: #ff000024;
}<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
<table>
<tbody style="padding-bottom: 20px;">
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd"><span class="pli"> 1 </span><span style="font-size: 14pt; font-family: Krub;"> One-on-one care tailored to meet unique preferences and needs.</span></td>
<td class="contd"><span class="cli"> 1 </span><span style="font-size: 14pt; font-family: Krub;"> When 24/7 care is required, the costs can be very high.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 2 </span><span style="font-size: 14pt; font-family: Krub;"> Remain in the comfort of their own home with a safe, familiar setting.</span></td>
<td class="contd"><span class="cli"> 2 </span><span style="font-size: 14pt; font-family: Krub;"> Managing caregivers and backup care planning requires continued family involvement.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 3 </span><span style="font-size: 14pt; font-family: Krub;"> The opportunity to choose the person who will be providing care.</span></td>
<td class="contd"><span class="cli"> 3 </span><span style="font-size: 14pt; font-family: Krub;"> Living in the home can lead to social isolation if there is little presence of family or friends.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 4 </span><span style="font-size: 14pt; font-family: Krub;"> The individual can get service from the same consistent caregiver.</span></td>
<td class="contd"><span class="cli"> 4 </span><span style="font-size: 14pt; font-family: Krub;"> The home may need to be modified for wheelchair accessibility or safety precautions.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 5 </span><span style="font-size: 14pt; font-family: Krub;"> Home care can cheaper depending on the skill level required and services can be combined to lower costs.</span></td>
<td class="contd"><span class="cli"> 5 </span><span style="font-size: 14pt; font-family: Krub;"> Fewer social activities may take place as opposed to care homes and facilities.</span></td>
</tr>
</tbody>
</table>
<div class="col-md-6" style="width: 49%;">
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">Assisted Living</span></h2>
<table>
<tbody>
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd"><span class="pli"> 1 </span><span style="font-size: 14pt; font-family: Krub;"> More affordable when 24/7 care is required.</span></td>
<td class="contd"><span class="cli"> 1 </span><span style="font-size: 14pt; font-family: Krub;"> Longer wait times to get admitted into an assisted living facility.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 2 </span><span style="font-size: 14pt; font-family: Krub;"> Allows the family to focus more on their relationship with their loved one.</span></td>
<td class="contd"><span class="cli"> 2 </span><span style="font-size: 14pt; font-family: Krub;"> Frequent changes to the staff mean one-on-care won’t be as consistent.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 3 </span><span style="font-size: 14pt; font-family: Krub;"> Residents have ample opportunities to socialize with others.</span></td>
<td class="contd"><span class="cli"> 3 </span><span style="font-size: 14pt; font-family: Krub;"> The quality of care can differ depending on the various care workers.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 4 </span><span style="font-size: 14pt; font-family: Krub;"> Family will not have to manage, schedule or hire care providers.</span></td>
<td class="contd"><span class="cli"> 4 </span><span style="font-size: 14pt; font-family: Krub;"> Residents may get kicked out of their assisted living home with little to no advanced notice.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 5 </span><span style="font-size: 14pt; font-family: Krub;"> The level of care can easily be increased as necessary.</span></td>
<td class="contd"><span class="cli"> 5 </span><span style="font-size: 14pt; font-family: Krub;"> Your loved one may simply not enjoy living in a group environment.</span></td>
</tr>
</tbody>
</table>
</div>EDIT 1:
According to your needs, here is an edit with everything you asked.
To make everything works fine, I had to create a new css class which I named .inlineTable.
.inlineTable {
display: inline-flex;
}
.btContentHolder table td,
.btContentHolder table th {
counter-increment: step-counter;
margin-bottom: 10px;
padding-left: 2.5714em;
padding-top: 2em;
padding-right: 0.2em;
}
.pli,
.cli {
content: counter(step-counter);
background-color: #fff;
font-size: 1.4285em;
border-radius: 50%;
width: 25px;
height: 25px;
line-height: 1.2em;
text-align: center;
}
.pli {
color: #2b6a83;
border: solid 1px #2b6a83;
}
.cli {
color: #e9736a;
border: solid 1px #e9736a;
}
.pli:hover {
background-color: #2b6a83;
color: #fff;
border: solid 1px #fff;
}
.cli:hover {
background-color: #e9736a;
color: #fff;
border: solid 1px #fff;
}
.protd {
background-color: #2b6a831c;
}
.contd {
background-color: #ff000024;
}<div class="inlineTable">
<div>
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
<table>
<tbody style="padding-bottom: 20px;">
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd"><span class="pli"> 1 </span><span style="font-size: 14pt; font-family: Krub;"> One-on-one care tailored to meet unique preferences and needs.</span></td>
<td class="contd"><span class="cli"> 1 </span><span style="font-size: 14pt; font-family: Krub;"> When 24/7 care is required, the costs can be very high.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 2 </span><span style="font-size: 14pt; font-family: Krub;"> Remain in the comfort of their own home with a safe, familiar setting.</span></td>
<td class="contd"><span class="cli"> 2 </span><span style="font-size: 14pt; font-family: Krub;"> Managing caregivers and backup care planning requires continued family involvement.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 3 </span><span style="font-size: 14pt; font-family: Krub;"> The opportunity to choose the person who will be providing care.</span></td>
<td class="contd"><span class="cli"> 3 </span><span style="font-size: 14pt; font-family: Krub;"> Living in the home can lead to social isolation if there is little presence of family or friends.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 4 </span><span style="font-size: 14pt; font-family: Krub;"> The individual can get service from the same consistent caregiver.</span></td>
<td class="contd"><span class="cli"> 4 </span><span style="font-size: 14pt; font-family: Krub;"> The home may need to be modified for wheelchair accessibility or safety precautions.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 5 </span><span style="font-size: 14pt; font-family: Krub;"> Home care can cheaper depending on the skill level required and services can be combined to lower costs.</span></td>
<td class="contd"><span class="cli"> 5 </span><span style="font-size: 14pt; font-family: Krub;"> Fewer social activities may take place as opposed to care homes and facilities.</span></td>
</tr>
</tbody>
</table>
</div>
<div>
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">Assisted Living</span></h2>
<table>
<tbody>
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd"><span class="pli"> 1 </span><span style="font-size: 14pt; font-family: Krub;"> More affordable when 24/7 care is required.</span></td>
<td class="contd"><span class="cli"> 1 </span><span style="font-size: 14pt; font-family: Krub;"> Longer wait times to get admitted into an assisted living facility.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 2 </span><span style="font-size: 14pt; font-family: Krub;"> Allows the family to focus more on their relationship with their loved one.</span></td>
<td class="contd"><span class="cli"> 2 </span><span style="font-size: 14pt; font-family: Krub;"> Frequent changes to the staff mean one-on-care won’t be as consistent.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 3 </span><span style="font-size: 14pt; font-family: Krub;"> Residents have ample opportunities to socialize with others.</span></td>
<td class="contd"><span class="cli"> 3 </span><span style="font-size: 14pt; font-family: Krub;"> The quality of care can differ depending on the various care workers.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 4 </span><span style="font-size: 14pt; font-family: Krub;"> Family will not have to manage, schedule or hire care providers.</span></td>
<td class="contd"><span class="cli"> 4 </span><span style="font-size: 14pt; font-family: Krub;"> Residents may get kicked out of their assisted living home with little to no advanced notice.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli"> 5 </span><span style="font-size: 14pt; font-family: Krub;"> The level of care can easily be increased as necessary.</span></td>
<td class="contd"><span class="cli"> 5 </span><span style="font-size: 14pt; font-family: Krub;"> Your loved one may simply not enjoy living in a group environment.</span></td>
</tr>
</tbody>
</table>
</div>
</div>EDIT 2:
Now I am sure it is done:
.btContentHolder table td,
.btContentHolder table th {
counter-increment: step-counter;
margin-bottom: 10px;
padding-left: 2.5714em;
padding-top: 2em;
padding-right: 0.2em;
vertical-align: top;
}
.pli,
.cli {
content: counter(step-counter);
background-color: #fff;
font-size: 1.4285em;
border-radius: 50%;
width: 25px;
height: 25px;
line-height: 1.2em;
text-align: center;
}
.pli {
color: #2b6a83;
border: solid 1px #2b6a83;
}
.cli {
color: #e9736a;
border: solid 1px #e9736a;
}
.pli:hover {
background-color: #2b6a83;
color: #fff;
border: solid 1px #fff;
}
.cli:hover {
background-color: #e9736a;
color: #fff;
border: solid 1px #fff;
}
.protd {
background-color: #2b6a831c;
}
.contd {
background-color: #ff000024;
}<div class="btContentHolder">
<table>
<thead style="padding-bottom: 20px;">
<tr>
<th colspan="2">
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
</th>
<th colspan="2">
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">Assisted Living</span></h2>
</th>
</tr>
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
</thead>
<tbody>
<tr>
<td class="protd"><span class="pli">
1
</span><span style="font-size: 14pt; font-family: Krub;">One-on-one care tailored to meet unique preferences and needs.</span></td>
<td class="contd"><span class="cli">
1
</span><span style="font-size: 14pt; font-family: Krub;">When 24/7 care is required,
the costs can be very high.</span></td>
<td class="protd"><span class="pli">
1
</span><span style="font-size: 14pt; font-family: Krub;">More affordable when 24/7 care is required.</span></td>
<td class="contd"><span class="cli">
1
</span><span style="font-size: 14pt; font-family: Krub;">Longer wait times to get admitted into an assisted living facility.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">
2
</span><span style="font-size: 14pt; font-family: Krub;">Remain in the comfort of their own home with a safe, familiar setting.</span></td>
<td class="contd"><span class="cli">
2
</span><span style="font-size: 14pt; font-family: Krub;">Managing caregivers and backup care planning requires continued family involvement.</span></td>
<td class="protd"><span class="pli">
2
</span><span style="font-size: 14pt; font-family: Krub;">Allows the family to focus more on their relationship with their loved one.</span></td>
<td class="contd"><span class="cli">
2
</span><span style="font-size: 14pt; font-family: Krub;">Frequent changes to the staff mean one-on-care won’t be as consistent.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">
3
</span><span style="font-size: 14pt; font-family: Krub;">The opportunity to choose the person who will be providing care.</span></td>
<td class="contd"><span class="cli">
3
</span><span style="font-size: 14pt; font-family: Krub;">Living in the home can lead to social isolation if there is little presence of family or friends.</span></td>
<td class="protd"><span class="pli">
3
</span><span style="font-size: 14pt; font-family: Krub;">Residents have ample opportunities to socialize with others.</span></td>
<td class="contd"><span class="cli">
3
</span><span style="font-size: 14pt; font-family: Krub;">The quality of care can differ depending on the various care workers.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">
4
</span><span style="font-size: 14pt; font-family: Krub;">The individual can get service from the same consistent caregiver.</span></td>
<td class="contd"><span class="cli">
4
</span><span style="font-size: 14pt; font-family: Krub;">The home may need to be modified for wheelchair accessibility or safety precautions.</span></td>
<td class="protd"><span class="pli">
4
</span><span style="font-size: 14pt; font-family: Krub;">Family will not have to manage,
schedule or hire care providers.</span></td>
<td class="contd"><span class="cli">
4
</span><span style="font-size: 14pt; font-family: Krub;">Residents may get kicked out of their assisted living home with little to no advanced notice.</span></td>
</tr>
<tr>
<td class="protd"><span class="pli">
5
</span><span style="font-size: 14pt; font-family: Krub;">Home care can cheaper depending on the skill level required and services can be combined to lower costs.</span></td>
<td class="contd"><span class="cli">
5
</span><span style="font-size: 14pt; font-family: Krub;">Fewer social activities may take place as opposed to care homes and facilities.</span></td>
<td class="protd"><span class="pli">
5
</span><span style="font-size: 14pt; font-family: Krub;">The level of care can easily be increased as necessary.</span></td>
<td class="contd"><span class="cli">
5
</span><span style="font-size: 14pt; font-family: Krub;">Your loved one may simply not enjoy living in a group environment.</span></td>
</tr>
</tbody>
</table>
</div>I turned everything into a table and use colspan.
I recommend you to take a look at table docs on W3Schools.
In my opinion you can simplify even more your code creating more classes and removing these styles from you HTML.
Upvotes: 1
persian-theme
Reputation: 6638
You can use the following code. I make a horizontal alignment for each td I put vertical-align: top; . You can change it.
.btContentHolder table td,
.btContentHolder table th {
/* padding: 10px; */
counter-increment: step-counter;
margin-bottom: 10px;
position: relative;
padding-left: 2.5714em;
padding-top: 2em;
padding-right: .2em;
}
.pli {
position: relative;
margin-right: 10px;
z-index: 100;
content: counter(step-counter);
background-color: #fff;
color: #2b6a83;
font-size: 1.2285em;
border: solid 1px #2b6a83;
border-radius: 50%;
text-align: center;
padding: 3px 7px;
display: inline-block;
}
.pli:hover {
background-color: #2b6a83;
color: #fff;
border: solid 1px #fff;
}
.cli {
position: relative;
margin-right: 10px;
z-index: 100;
content: counter(step-counter);
background-color: #fff;
color: #e9736a;
font-size: 1.4285em;
border: solid 1px #e9736a;
border-radius: 50%;
padding: 3px 7px;
}
.cli:hover {
background-color: #e9736a;
color: #fff;
border: solid 1px #fff;
}
.protd {
background-color: #2b6a831c;
padding: 10px;
}
.contd {
background-color: #ff000024;
padding: 10px;
}
#table1 .col1 {
float: left;
width: 8%;
}
#table1 .col2 {
float: left;
width: 92%;
}
#table2 .col1 {
float: left;
width: 12%;
}
#table2 .col2 {
float: left;
width: 88%;
}
td{
vertical-align: top;
}<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">In-Home Care</span></h2>
<table id="table1">
<tbody style="padding-bottom: 20px;">
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">1</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">One-on-one care tailored to meet unique preferences and needs.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">1</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">When 24/7 care is required, the costs can be very high.</span></div>
</td>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">2</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Remain in the comfort of their own home with a safe, familiar setting.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">2</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Managing caregivers and backup care planning requires continued family involvement.</span></div>
</td>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">3</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">The opportunity to choose the person who will be providing care.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">3</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Living in the home can lead to social isolation if there is little presence of family or friends.</span></div>
</td>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">4</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">The individual can get service from the same consistent caregiver.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">4</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">The home may need to be modified for wheelchair accessibility or safety precautions.</span></div>
</td>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">5</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Home care can cheaper depending on the skill level required and services can be combined to lower costs.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">5</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Fewer social activities may take place as opposed to care homes and facilities.</span></div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6" style="width: 2%;"></div>
<div class="col-md-6" style="width: 70%;">
<h2 style="text-align: center;"><span style="color: #2b6a83; font-family: Krub;">Assisted Living</span></h2>
<table id="table2">
<tbody>
<tr>
<th style="text-align: center; font-weight: 500; color: #ffffff; font-size: 24pt; font-family: Krub; background-color: #2b6a83; padding: 0px;">Pros</th>
<th style="font-weight: 500; font-size: 24pt; font-family: Krub; color: #ffffff; background-color: #e9736a; padding: 0px; text-align: center;">Cons</th>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">1</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">More affordable when 24/7 care is required.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">1</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Longer wait times to get admitted into an assisted living facility.</span></div>
</td>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">2</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Allows the family to focus more on their relationship with their loved one.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">2</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Frequent changes to the staff mean one-on-care won’t be as consistent.</span></div>
</td>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">3</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Residents have ample opportunities to socialize with others.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">3</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">The quality of care can differ depending on the various care workers.</span></div>
</td>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">4</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Family will not have to manage, schedule or hire care providers.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">4</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Residents may get kicked out of their assisted living home with little to no advanced notice.</span></div>
</td>
</tr>
<tr>
<td class="protd">
<div class="col1"><span class="pli">5</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">The level of care can easily be increased as necessary.</span></div>
</td>
<td class="contd">
<div class="col1"><span class="cli">5</span></div>
<div class="col2"><span style="font-size: 14pt; font-family: Krub;">Your loved one may simply not enjoy living in a group environment.</span></div>
</td>
</tr>
</tbody>
</table>Upvotes: 1
Related Questions
- HTML Column Span for 2 Tables
- How can I begin my table row text from the same line?
- How to make one <td> span both columns in a two column table?
- Table row span cell span
- Align elements in td in one line
- I want texts inside 2 cells start on the same line
- Align two spans inside a td - One left and one right
- How to make span appear on each end of a TD
- How to align spans within a table cell with the spans in the cell below it?
- How to put two span tags on the same line?