Modifying twig file to show elements side-by-side I am working on views with embedded filters and my resultant view fields have the below twig setup:

 {% set index = 0 %}
&lt;div class='row'&gt;
    &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-body"&gt;
       {% for key, field in fields -%}
        {% if index == 0 or index == 5 %}
        &lt;div class='col-md-6'&gt;
        {% endif %}

          {%- if field.wrapper_element -%}
            &lt;{{ field.wrapper_element }}{{ field.wrapper_attributes }}&gt; 
          {%- endif %}

          {%- if field.label -%}
            {%- if field.label_element -%}
              &lt;{{ field.label_element }}{{ field.label_attributes }}&gt;{{ field.label }}{{ field.label_suffix }}&lt;/{{ field.label_element }}&gt;
            {%- else -%}
              {{ field.label }}{{ field.label_suffix }}
            {%- endif %}
          {%- endif %}

          &lt;a href="#" data-toggle="tooltip" data-placement="right" title="{{ tooltips[key] }}"&gt;
            {%- if field.element_type -%}
              &lt;{{ field.element_type }}{{ field.element_attributes }}&gt;{{ field.content }}&lt;/{{ field.element_type }}&gt;
            {%- else -%}
              {{ field.content }}
            {%- endif %}
          &lt;/a&gt;

           &lt;br/&gt;
          {%if index == 4 %}
          &lt;br/&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-4"&gt;
             &lt;div class="space"&gt;&lt;/div&gt;
              &lt;button class="button js-form-submit form-submit btn-info btn" type="button" value="Btn1" name=""&gt;Btn1&lt;/button&gt;
            &lt;/div&gt;
             &lt;div class="col-md-4"&gt;
              &lt;div class="space"&gt;&lt;/div&gt;
              &lt;button class="button js-form-submit form-submit btn-info btn" type="button" OnClick = "window.print();" value="PRINT" name=""&gt;PRINT&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          {% endif %}

        {%- if field.wrapper_element -%}
            &lt;/{{ field.wrapper_element }}&gt;
          {%- endif %}

        {% if index + 1 == fields | length %}
          &lt;a href=''&gt;Click to go to next page&lt;/a&gt;
          {% endif %}
        {% if index == 4 or index + 1 == fields | length  %}
        &lt;/div&gt;
        {% endif %}
        {% set index = index + 1 %}
      {%- endfor %}
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


In this setup the lable is showing above and then the text beneath. Is there a way to make them show next to each other:

Current output:

 label:
 Answer


Desired output:

label:answer


[![enter image description here][1]][1]

Any help?!!
It’s likely because field.label_element is a p tag, which makes the new line.

Try to use span instead, like this:

&lt;span {{ field.label_attributes }}&gt;{{ field.label }}{{ field.label_suffix }}&lt;/span&gt;

&lt;a href="#" data-toggle="tooltip" data-placement="right" title="{{ tooltips[key] }}"&gt;
  &lt;span {{ field.element_attributes }}&gt;{{ field.content }}&lt;/span&gt;
&lt;/a&gt;


You can also add a &lt;br&gt; tag after the closing a tag to make sure that all label/content sets are shown on separate lines.

Since the above did not work in your case, you can add a div around the two elements and then you can add some simple flexbox styling in your css to get the desired result.