Я хочу, чтобы тексты внутри 2 ячеек начинались с одной строки

Question

У меня небольшая проблема с моим столом. В третьем ряду у меня есть 2 ячейки с текстами внутри них, но в одной из них текст длиннее, а в другой - короче.

Можно ли сделать так, чтобы текст начинался на одной строке без добавления / удаления текста?

<div class="section2 center">
 <table>
    <tr>
        <th colspan="2">Our services</th>
    </tr>

    <tr>
        <th>Isolation and loneliness</th>
        <th>Family conflict or separation</th>
    </tr>

    <tr>
        <td>Human beings are naturally social animals. When we find 
         ourselves becoming isolated, we should take that as a warning sign 
         that we are turned against ourselves in some basic way. If not 
         already there, we are on a path toward feeling bad, lonely, 
         introverted or even depressed. Read more...</td>
        <td>Parental separation often initially leads to an increase in 
         parental conflict and anger, although for some families the level 
         of conflict reduces when parents do not see each other regularly. 
         Read more...</td>
    </tr>

    <tr style="height:5px"></tr>


    <tr>
        <th>Death of loss</th>
        <th>Child psychological program</th>
    </tr>

    <tr>
        <td>     There are many kinds of loss and each has its own kind of 
        grief. People lose loved ones like spouses, partners, children, 
        family members, and friends. Even pet losses can cause grief. job or 
        property loss can be painful. Read more...</td>
        <td>The basic premise of the program is that children who avoid 
        interactions with their peers or have difficulties in these 
        interactions do so because of a skill deficit or excessive anxiety. 
        Read more...</td>
    </tr>
</div>

    ---CSS---

.section2 table {
    align:center;
    margin-top:80px;
}

.section2 table tr:first-child>th {
   font-size:25px;
}

.section2 table tr:nth-child(3) {
   height:auto;
}


.section2 table tr:nth-child(3) td {
   width:200px;
   background-color:blue;
   padding:20px;
   text-align:center;
}

.section2 table tr:nth-child(6) td {
   padding:20px;
   text-align:center;
   background-color:red;
}

Answer 1

вы можете использовать vertical-align: top до td в вашем head теге, как это

<style>
  td {
    vertical-align: top;
  }
</style>

Answer 2

Вы хотите добавить

.section2 table tr {
     vertical-align: top;
}

И, кстати, вместо align:center следует на text-align:center

.section2 table {
    text-align:center;
    margin-top:80px;
}

.section2 table tr {
     vertical-align: top;
}

.section2 table tr:first-child>th {
   font-size:25px;
}

.section2 table tr:nth-child(3) {
   height:auto;
}


.section2 table tr:nth-child(3) td {
   width:200px;
   background-color:blue;
   padding:20px;
   text-align:center;
}

.section2 table tr:nth-child(6) td {
   padding:20px;
   text-align:center;
   background-color:red;
}

<div class="section2 center">
 <table>
    <tr>
        <th colspan="2">Our services</th>
    </tr>

    <tr>
        <th>Isolation and loneliness</th>
        <th>Family conflict or separation</th>
    </tr>

    <tr>
        <td>Human beings are naturally social animals. When we find 
         ourselves becoming isolated, we should take that as a warning sign 
         that we are turned against ourselves in some basic way. If not 
         already there, we are on a path toward feeling bad, lonely, 
         introverted or even depressed. Read more...</td>
        <td>Parental separation often initially leads to an increase in 
         parental conflict and anger, although for some families the level 
         of conflict reduces when parents do not see each other regularly. 
         Read more...</td>
    </tr>

    <tr style="height:5px"></tr>


    <tr>
        <th>Death of loss</th>
        <th>Child psychological program</th>
    </tr>

    <tr>
        <td>     There are many kinds of loss and each has its own kind of 
        grief. People lose loved ones like spouses, partners, children, 
        family members, and friends. Even pet losses can cause grief. job or 
        property loss can be painful. Read more...</td>
        <td>The basic premise of the program is that children who avoid 
        interactions with their peers or have difficulties in these 
        interactions do so because of a skill deficit or excessive anxiety. 
        Read more...</td>
    </tr>
</div>

 

Answer 3

Просто добавьте

.section2 table tr td {
    vertical-align: top;
}

к вашему коду.

Скрипка: https://jsfiddle.net/32n2zjky/