Place component placeholder to the right of the existing component

Hi,

Adding some more details

Following is the jsp code from my component

<%@page session="false"%><%@ page

import="com.day.cq.wcm.foundation.Placeholder"%>

<%@include file="/libs/foundation/global.jsp"%>

<div class="row" style="border: 1px solid red">

<div class="col-xs-12">

<cq:include path="input-items" resourceType="foundation/components/parsys" />

</div>

</div>

and the component is rendered as below

Is there any way to add one more class to the div which wraps the parsys?

<div class="input-items parsys">

Thanks

AEM Support out of the Responsive Grid component that lets you place your components into columns.

Or you can use a custom TOUCH UI Grid component - as pointed out by Gaurav.

To learn how to use the out of the box Responsive Grid component - go through the entire weekend tutorial - Getting Started with AEM Sites - WKND Tutorial

You need to have a parent container in order to restrict its size to specific columns and then work with 'float' and 'width'. You'd have to restrict the width of your component to certain columns with specific constraints.

Use 'column control' component or create your custom one based on your requirements.

check this - Creating a custom Touch UI Grid Component for Adobe Experience Manager