カートページのコーディング / 要素を横並び

[chikakoyajima]

カートページのコーディングをしています。

配送日指定→備考欄→チェックアウトボタン

というふうに要素を横並びにしたいのですが、うまくいきません。

何かアドバイスいただけないでしょうか。

<div class="parent">

{% if section.settings.cart_terms_show %}
<div class="terms rte">
<input type="checkbox" id="terms" />
{% assign terms_url = pages[section.settings.cart_terms_page].url %}
{% capture terms_label_html %}<label for="terms">{{ 'cart.terms.agreement_html' | t: terms_url: terms_url }}</label>{% endcapture %}
{% if section.settings.cart_terms_page == blank %}
{{ terms_label_html | replace: '<a ', '<span ' | replace: '</a>', '</span>' }}
{% else %}
{{ terms_label_html }}
{% endif %}
</div>

{% endif %}

{% if section.settings.show_tax_and_shipping %}
{%- capture taxes_shipping_checkout -%}
{%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif shop.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}

<div class="cart-policies rte">{{ taxes_shipping_checkout }}</div>
{% endif %}

<input type="submit" class="checkout-btn" name="checkout" value="{{ 'cart.general.checkout' | t | escape }}" />

{% comment %}Paypal and Google checkout buttons{% endcomment %}
{% if section.settings.show_additional_checkout_buttons and additional_checkout_buttons and section.settings.cart_terms_show == false %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}

<div style="width:150px; clear:both">
<label for="datepicker">配達希望日 : </label>
<input id="datepicker" type="text" name="attributes[配達希望日]" value="{{ cart.attributes.date }}" />
</div>

<script>
$("#datepicker").datepicker( {
minDate: '+4D',
maxDate: '+3M',
} );
</script>

{% if section.settings.cart_note_show %}

　<div class="note-area">
<label for="note">{{ 'cart.label.note' | t }}</label>
<textarea id="note" name="note">{{ cart.note }}</textarea>
</div>

</div>

CSS→

.parent {
width: 100%;
display: flex;
}
.child {
width: 100px;
}