Não consigo mostrar a mensagem ao lado do campo.
<ui:define name="corpo">
<h:form id="frm">
<p:focus context="frm" />
<h1>Cadastro de Serviço</h1>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:toolbar style="margin-top: 20px">
<p:toolbarGroup>
<p:button value="Novo" outcome="/servicos/CadastroServico" />
<p:commandButton value="Salvar" id="botaoSalvar" actionListener="#{cadastroServicoBean.salvar}" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:button value="Pesquisa" outcome="/servicos/PesquisaServico" />
<p:separator />
<p:button value="Limpar Formulário" />
</p:toolbarGroup>
</p:toolbar>
<h:panelGrid columns="2" id="painel" styleClass="form-cadastro-serv" >
<p:outputLabel value="cliente" style="float:right; margin-top:2px;" id="cliente" />
<p:inputText size="40" styleClass="campo" id="cli" for="cliente" required="true" label="Cliente é obrigatório">
<p:message for="cli"/>
</p:inputText>
<p:outputLabel value="telefone fixo" style="float:right;" lang="telefone fixo" />
<p:inputMask id="tel" mask="([telefone removido]" size="16" styleClass="campo" required="true" label="telefone" />