Хотите выровнять два слова в одной строке в css

Question

У меня есть два слова, которые изменятся после некоторого кодирования JavaScript. Они будут массивами. Я могу хорошо выполнить кодирование JavaScript, но я хочу, чтобы они были выровнены вместо одного над другим:

<div class="testArrayDiv">   
    <input type="text" id="testArrayText" value="aqui" class="testArrayText">
    <p id="pTextIng" class="pTextIng">Inglés</p> 
    <p id="pTextPor" class="pTextPor">Português</p>    
    <button id="btnArray" class="btnArray">Test Array</button>
</div>    

Моя CSS кодировка:

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

Слова «Inglés» и «Português» станут столбцами после некоторых команд Javascript, но они не выровнены, и я хочу, чтобы они были выровнены.

Answer 1

<p> автоматически вставляет разрыв строки после текста. Если вы не хотите этого, вы должны использовать <span>. Я предполагаю, что вы хотите, чтобы оба слова были в одной строке с полем ввода, поэтому вы должны поместить оба элемента <span> в <div> и применить margin-left к этому.

HTML:

<div class="indentation">
    <span id="pTextIng" class="pTextIng">Inglés</span> 
    <span id="pTextPor" class="pTextPor">Português</span>
</div>

CSS:

.indentation {
    display: inline-block;
    margin-left: 45%;
}

Answer 2

.pTextIng {
    border:1px solid black;
   width:80px;
 display:inline-block;
}

.pTextPor {
border:1px solid red;
     width:80px;    
  display:inline-block;
}

<div class="testArrayDiv">   
    <input type="text" id="testArrayText" value="aqui" class="testArrayText">
    <p id="pTextIng" class="pTextIng">Inglés</p> 
    <p id="pTextPor" class="pTextPor">Português</p>    
    <button id="btnArray" class="btnArray">Test Array</button>
</div> 

Answer 3

Вам нужно добавить вертикальное выравнивание: верх; , чтобы решить проблему

.testAlign p {
    display: inline-block;
    vertical-align: top;
    /* other styles */
}

, а также, что теги <p> должны находиться внутри <div>

<div class = "testAlign">    
    <p id="pTextIng" class="pTextIng">Inglés</p> 
    <p id="pTextPor" class="pTextPor">Português</p>
</div>

Answer 4

Если вы сделаете div с обоими p внутри, как:

<div class="testArrayDiv">   
    <input type="text" id="testArrayText" value="aqui" class="testArrayText">
    <div class="idiomas">
        <p id="pTextIng" class="pTextIng">Inglés</p> 
        <p id="pTextPor" class="pTextPor">Português</p>  
    </div>  
    <button id="btnArray" class="btnArray">Test Array</button>
</div> 

И затем вы сделаете этот div элемент flex и flex-direction: row

.idiomas{
    display: flex;
    flex-direction: row;
}